// ── ふたば flower shop — themed landing page component ──
// One markup, four aesthetic themes (color + font + layout). Exports to window.
const { useState } = React;

// shared copy (identical across themes — only look changes)
const FS_PLANTS = [
  { jp: "TANIKU", name: "多肉植物", body: "ぷっくり個性的。水やりは控えめでよく、初めての一鉢にいちばん向いています。", ph: "写真：多肉の寄せ植え" },
  { jp: "ANNUAL", name: "花壇の花（一年草）", body: "季節ごとに花壇を彩る、育てやすい定番。植えるだけで庭が華やぎます。", ph: "写真：色とりどりの一年草" },
  { jp: "PERENNIAL", name: "多年草・宿根草", body: "一度植えれば毎年楽しめる、手間いらずの頼れる存在です。", ph: "写真：宿根草の花壇" },
  { jp: "HERB", name: "ハーブ", body: "育てて、香って、料理にも。暮らしに役立つ、はたらきものの緑。", ph: "写真：キッチンハーブ" },
];
const FS_SEASONS = [
  { s: "春", r: "SPRING", t: "芽吹きの寄せ植え。新生活の贈りものに。" },
  { s: "夏", r: "SUMMER", t: "暑さに強い多肉のセット。手間いらず。" },
  { s: "秋", r: "AUTUMN", t: "実りと紅葉のアレンジメント。" },
  { s: "冬", r: "WINTER", t: "長く楽しめる室内グリーン。" },
];
const FS_TIPS = [
  { n: "01 / 水やり", t: "土が乾いたら、たっぷりと。", b: "「乾いたらたっぷり」が基本。多肉は乾かし気味に。種類に合わせてお伝えします。" },
  { n: "02 / 日あたり", t: "置き場所には、コツがある。", b: "日なたが好きな子、半日陰が好きな子。暮らしの環境に合う植物を選びます。" },
  { n: "03 / 植え替え", t: "一年に一度、新しい土へ。", b: "根がのびてきたら植え替えのサイン。鉢のサイズアップもご相談ください。" },
];

// shop-name candidates (name + romaji + meaning + concept story line)
const FS_NAMES = {
  futaba:   { name: "ふたば",   romaji: "futaba",   insta: "@futaba.flower",
    meaning: "双葉。芽生えの最初の二枚の葉。育てるはじめの一歩を。",
    story: "双葉は、芽が出て最初にひらく二枚の葉。あなたの暮らしに、みどりのはじめの一歩を。" },
  tsubomi:  { name: "つぼみ",   romaji: "tsubomi",  insta: "@tsubomi.flower",
    meaning: "蕾。咲く前の、いちばん楽しみな時間から。",
    story: "つぼみは、咲く前のいちばん楽しみな時間。これから育つよろこびを、暮らしのそばに。" },
  mebae:    { name: "めばえ",   romaji: "mebae",    insta: "@mebae.flower",
    meaning: "芽生え。土から顔を出したばかりの、小さなはじまり。",
    story: "めばえは、土から顔を出したばかりの小さな芽。育てるよろこびのはじまりを、いっしょに。" },
  midoriya: { name: "みどりや", romaji: "midoriya", insta: "@midoriya.flower",
    meaning: "みどり屋。緑のある暮らしを、すぐ近所で。",
    story: "みどりのある暮らしを、すぐ近所で。手のかからない緑から、はじめませんか。" },
  nekko:    { name: "ねっこ",   romaji: "nekko",    insta: "@nekko.flower",
    meaning: "根っこ。暮らしにしっかり根づく、育てやすい緑。",
    story: "ねっこは、暮らしに根づく緑のこと。しっかり根を張る、育てやすい植物を選んでいます。" },
  konoha:   { name: "このは",   romaji: "konoha",   insta: "@konoha.flower",
    meaning: "木の葉。葉っぱ一枚から、みどりのある毎日を。",
    story: "葉っぱ一枚から、みどりのある毎日を。多肉も観葉も、気軽にお選びください。" },
};
// split a name so its last character can be accent-colored in the wordmark
const splitMark = (name) => { const a = [...name]; return [a.slice(0, -1).join(""), a.at(-1)]; };

// 写真：ユーザー提供（images/）＝本番候補、Pexels＝仮素材（差し替え前提）
const px = (id) => `https://images.pexels.com/photos/${id}/pexels-photo-${id}.jpeg?auto=compress&cs=tinysrgb&w=1100`;
const FS_IMG = {
  "写真：店先の植物棚": { src: "images/shop-interior.jpg" },
  "写真：店主とグリーン": { src: "images/kids-flowers.jpg" },
  "写真：多肉の寄せ植え": { src: "images/succulents-kokedama.jpg" },
  "写真：色とりどりの一年草": { src: px(10386447), tmp: true },
  "写真：宿根草の花壇": { src: "images/flowerbed.webp" },
  "写真：キッチンハーブ": { src: px(2478231), tmp: true },
  "写真：ラッピングした鉢植えギフト": { src: "images/gift-bouquets.jpg" },
};

function Placeholder({ label, style }) {
  const img = FS_IMG[label];
  return (
    <div className="ph" style={style}>
      {img ? <img className="ph-img" src={img.src} alt={label} /> : null}
      {(!img || img.tmp) ? <span>{label}{img && img.tmp ? <i> ・仮</i> : null}</span> : null}
    </div>
  );
}

// small card to compare shop-name candidates in a theme's display type
function NameCard({ shop, theme }) {
  const [h, l] = splitMark(shop.name);
  return (
    <div className="namecard" data-layout={theme.layout} style={theme.vars}>
      <span className="nc-eyebrow">Shop name</span>
      <div className="nc-mark">{h}<em>{l}</em></div>
      <div className="nc-romaji">{shop.romaji}</div>
      <hr />
      <p className="nc-meaning">{shop.meaning}</p>
    </div>
  );
}

function FlowerSite({ theme, shop = FS_NAMES.futaba }) {
  const [mh, ml] = splitMark(shop.name);
  return (
    <div className="fsite" data-layout={theme.layout} style={theme.vars}>
      {/* nav */}
      <div className="nav">
        <div className="brand">
          <span className="mark">{mh}<em>{ml}</em></span>
          <span className="romaji">{shop.romaji}</span>
        </div>
        <nav className="navlinks">
          <a href="#concept">コンセプト</a>
          <a href="#plants">植物について</a>
          <a href="#delivery">季節の宅配</a>
          <a href="#care">育て方</a>
          <a href="#store">店舗情報</a>
          <a className="btn ghost" href="#store">お問い合わせ</a>
        </nav>
      </div>

      {/* hero */}
      <header className="hero">
        <div>
          <span className="eyebrow">住宅街の小さな花屋</span>
          <h1>はじめての、<br />みどり。</h1>
          <p className="lead">多肉植物と、育てやすい花壇の花を中心に。小さな間口から、暮らしに寄りそう一鉢をお届けします。</p>
          <div className="cta">
            <a className="btn lg" href="#store">お店を見る</a>
            <a className="btn ghost lg" href="#delivery">季節の宅配について</a>
          </div>
        </div>
        <Placeholder label="写真：店先の植物棚" />
      </header>

      {/* concept */}
      <section id="concept" className="sec-concept">
        <div className="wrap">
          <div className="sec-head">
            <span className="eyebrow">Concept ・ ごあいさつ</span>
            <h2>「枯らしちゃうかも」を、<br />なくしたい花屋です。</h2>
            <p className="lead">「植物は好きだけど、うまく育てられるか不安」。そんな声によく出会います。ふたばは、育てやすい植物に “育て方のひとこと” を添えてお渡しする花屋。多肉植物や花壇の花など、初めてでも長く付き合える緑を選んでいます。</p>
          </div>
          <p className="lead" style={{ maxWidth: "52ch" }}>{shop.story}住宅街の片隅で、小さくお待ちしています。</p>
          <Placeholder label="写真：店主とグリーン" style={{ minHeight: 260, marginTop: 40 }} />
        </div>
      </section>

      {/* plants */}
      <section id="plants" className="sec-plants">
        <div className="wrap">
          <div className="sec-head">
            <span className="eyebrow">Plants</span>
            <h2>育てやすい子たちを、そろえています。</h2>
            <p className="lead">初めてでも続けやすい植物を中心に。気になる子は、店頭で育て方をお気軽にお尋ねください。</p>
          </div>
          <div className="cards">
            {FS_PLANTS.map((p) => (
              <div className="card" key={p.name}>
                <Placeholder label={p.ph} />
                <div className="body">
                  <h3>{p.name}<span className="jp">{p.jp}</span></h3>
                  <p>{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* delivery */}
      <section id="delivery" className="sec-delivery">
        <div className="wrap">
          <div className="inner">
            <div>
              <span className="eyebrow">Delivery</span>
              <h2>季節の鉢植えセット・アレンジメントを、ご自宅へ。</h2>
              <p className="lead">春夏秋冬、季節に合わせた寄せ植えやアレンジメントをお届けします。ギフトにも、自分へのごほうびにも。</p>
              <div className="seasons">
                {FS_SEASONS.map((s) => (
                  <div className="season" key={s.s}>
                    <b>{s.s}<em>{s.r}</em></b>
                    <p>{s.t}</p>
                  </div>
                ))}
              </div>
              <p className="note">＊ 配達は近隣エリア中心。定期便もご相談いただけます。</p>
            </div>
            <Placeholder label="写真：ラッピングした鉢植えギフト" />
          </div>
        </div>
      </section>

      {/* care */}
      <section id="care" className="sec-care">
        <div className="wrap">
          <div className="sec-head">
            <span className="eyebrow">Care</span>
            <h2>買ったあとも、ひとりにしません。</h2>
            <p className="lead">店頭では育て方カードをお付けします。SNSでも季節のお手入れを発信中です。</p>
          </div>
          <div className="tips">
            {FS_TIPS.map((t) => (
              <div className="tip" key={t.n}>
                <span className="n">{t.n}</span>
                <h3>{t.t}</h3>
                <p>{t.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* store info */}
      <section id="store" className="sec-store">
        <div className="wrap">
          <div className="sec-head">
            <span className="eyebrow">Store</span>
            <h2>店舗情報</h2>
          </div>
          <div className="inner">
            <div className="info">
              <dl>
                <dt>Address</dt><dd>〒153-0042<br />東京都目黒区青葉台 2-19-23<br /><span style={{ color: "var(--muted)", fontSize: 13 }}>（住所は仮置きです）</span></dd>
                <dt>Hours</dt><dd>9:00 – 20:00</dd>
                <dt>Closed</dt><dd>水曜・木曜</dd>
                <dt>Access</dt><dd>池尻大橋駅から徒歩8分（仮）</dd>
                <dt>Tel</dt><dd>000-0000-0000</dd>
              </dl>
              <a className="btn lg" href="#" style={{ marginTop: 28 }}>来店・宅配のお問い合わせ</a>
            </div>
            <Placeholder label="地図：店舗周辺マップ" style={{ minHeight: 300 }} />
          </div>
        </div>
      </section>

      {/* footer */}
      <footer>
        <div className="inner">
          <div>
            <div className="mark">{shop.name}</div>
            <p className="tag">住宅街の小さな花屋。みどりのはじめの一歩を、いっしょに。</p>
            <div className="social">
              <a href="#">Instagram {shop.insta}</a>
              <a href="#">お問い合わせ</a>
            </div>
          </div>
        </div>
        <div className="copy">© 2026 {shop.romaji} flower — このページはデザイン案です（写真・住所は仮）。</div>
      </footer>
    </div>
  );
}

// ── theme definitions (color + font + layout) ──
const FS_THEMES = {
  a: {
    layout: "a",
    vars: {
      "--bg": "#faf6ee", "--surface": "#ffffff", "--surface2": "#f1ece1",
      "--ink": "#3c382f", "--muted": "#82796b", "--line": "#e8e1d3",
      "--brand": "#8fa182", "--brand-deep": "#566a4e", "--on-brand": "#f8f4ea",
      "--accent": "#c47b5a", "--accent2": "#d6a89b",
      "--font-display": "'Zen Maru Gothic', sans-serif",
      "--font-body": "'Zen Kaku Gothic New', sans-serif",
    },
  },
  b: {
    layout: "b",
    vars: {
      "--bg": "#f6f3ec", "--surface": "#fffdf9", "--surface2": "#efe9de",
      "--ink": "#2d2a24", "--muted": "#807a6e", "--line": "#ddd5c6",
      "--brand": "#7d8a6e", "--brand-deep": "#46523c", "--on-brand": "#f4f1e8",
      "--accent": "#b56a4a", "--accent2": "#cf9f90",
      "--font-display": "'Shippori Mincho', serif",
      "--font-body": "'Zen Kaku Gothic New', sans-serif",
    },
  },
  c: {
    layout: "c",
    vars: {
      "--bg": "#f2f4ea", "--surface": "#ffffff", "--surface2": "#e9eede",
      "--ink": "#2c322a", "--muted": "#76806e", "--line": "#dde2cf",
      "--brand": "#7fa07a", "--brand-deep": "#3c5238", "--on-brand": "#f4f3e6",
      "--accent": "#cd8068", "--accent2": "#dca99c",
      "--font-display": "'Klee One', cursive",
      "--font-body": "'Zen Kaku Gothic New', sans-serif",
    },
  },
  d: {
    layout: "d",
    vars: {
      "--bg": "#eef1ea", "--surface": "#ffffff", "--surface2": "#e4e9df",
      "--ink": "#262b27", "--muted": "#727b73", "--line": "#d6dcd1",
      "--brand": "#7e9479", "--brand-deep": "#4a5a45", "--on-brand": "#f3f5ee",
      "--accent": "#bd7351", "--accent2": "#cf9e90",
      "--font-display": "'Zen Kaku Gothic New', sans-serif",
      "--font-body": "'Zen Kaku Gothic New', sans-serif",
    },
  },
};

Object.assign(window, { FlowerSite, NameCard, FS_THEMES, FS_NAMES });