// ---- page sections ----
const { useState: uS, useEffect: uE, useRef: uR } = React;

/* ============ NAV ============ */
function Nav({ onOpenMenu, menuOpen }) {
  const [scrolled, setScrolled] = uS(false);
  const [light, setLight] = uS(true);
  uE(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      const hero = document.querySelector(".hero");
      const h = hero ? hero.offsetHeight - 80 : 600;
      setLight(window.scrollY < h);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${light ? "light-text" : ""}`}>
      <a href="#top" className="brand">
        <span className="mark"><Mark /></span>
        <span className="name">アグリファーム あき<small>AGRIFARM AKI</small></span>
      </a>
      <div className="navlinks">
        {NAV.filter((n) => n.id !== "contact").map((n) => <a key={n.id} href={`#${n.id}`}>{n.label}</a>)}
      </div>
      <a href="#contact" className="nav-cta">お問い合わせ</a>
      <button className={`burger ${menuOpen ? "open" : ""}`} onClick={onOpenMenu} aria-label="メニュー">
        <span></span><span></span><span></span>
      </button>
    </nav>
  );
}

function MobileMenu({ open, onClose }) {
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`}>
      {NAV.map((n) => (
        <a key={n.id} href={`#${n.id}`} onClick={onClose}>
          <span className="n">{n.n}</span>{n.label}
        </a>
      ))}
    </div>
  );
}

/* ============ HERO ============ */
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-bg">
        <image-slot id="hero-main" placeholder="メインビジュアル（農園・果実の写真）" fit="cover"></image-slot>
      </div>
      <div className="hero-inner wrap">
        <Reveal><Eyebrow>Okinawa · Onna Village</Eyebrow></Reveal>
        <Reveal delay={120}>
          <h1>沖縄の太陽が育てた<br /><span className="accent">森のアイスクリーム</span>。</h1>
        </Reveal>
        <Reveal delay={240}>
          <p className="sub">恩納村のネットハウスで、一花ずつ手をかけて。クリーミーで上品な甘さのアテモヤを、丁寧に育てています。</p>
        </Reveal>
        <Reveal delay={360}>
          <div className="hero-actions">
            <a href="#about" className="btn btn-primary">アテモヤを知る<Icon name="arrow" /></a>
            <a href="#contact" className="btn btn-ghost">お問い合わせ</a>
          </div>
        </Reveal>
      </div>
      <a href="#about" className="scroll-cue">
        <span>SCROLL</span>
        <span className="line"></span>
      </a>
    </header>
  );
}

/* ============ MARQUEE STRIP ============ */
function Strip() {
  const items = ["森のアイスクリーム", "ATEMOYA", "なめらかな果肉", "沖縄県恩納村", "手作業の人工受粉", "冬〜春の収穫"];
  const run = (
    <span>
      {items.map((t, i) => <React.Fragment key={i}>{t}<span className="dot"></span></React.Fragment>)}
    </span>
  );
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip-track">{run}{run}</div>
    </div>
  );
}

/* ============ ABOUT ============ */
function About() {
  return (
    <section className="pad" id="about">
      <div className="wrap about-grid">
        <div className="about-copy">
          <Reveal><Eyebrow>What is Atemoya</Eyebrow></Reveal>
          <Reveal delay={100}><h2 className="section-title">「森のアイスクリーム」<br />と呼ばれる果実。</h2></Reveal>
          <Reveal delay={180}>
            <p className="lead">アテモヤは、チェリモヤとバンレイシ（シュガーアップル）を交配させた果物です。クリーム状のなめらかな果肉と、芳醇な香り、上品な甘さが特徴。沖縄の温暖な気候との相性は抜群です。</p>
          </Reveal>
          <Reveal delay={240}>
            <div className="icecream-tag"><Icon name="leaf" style={{ width: 18, height: 18, color: "var(--amber)" }} />糖度が高く、なめらかな口どけ</div>
          </Reveal>
        </div>
        <Reveal delay={160} className="about-visual">
          <image-slot id="about-fruit" placeholder="アテモヤの断面・果実写真" radius="20" fit="cover"></image-slot>
          <div className="badge"><span><b>20–26℃</b><small>生育適温</small></span></div>
        </Reveal>
      </div>

      <div className="wrap">
        <div className="feat-grid">
          {FEATURES.map((f, i) => (
            <Reveal key={f.title} delay={i * 90} className="feat">
              <span className="num">{f.n}</span>
              <span className="ico"><Icon name={f.icon} /></span>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ FARM ============ */
function Farm() {
  return (
    <section className="band-green pad" id="farm">
      <div className="wrap farm-grid">
        <div>
          <Reveal>
            <span className="loc-pill"><Icon name="pin" />沖縄県国頭郡恩納村</span>
          </Reveal>
          <Reveal delay={100}><Eyebrow>Our Farm</Eyebrow></Reveal>
          <Reveal delay={160}>
            <h2 className="section-title" style={{ color: "var(--paper)", margin: "0 0 20px" }}>
              恩納村の気候をいかした、<br />ネットハウス栽培。
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="lead" style={{ color: "rgba(251,248,240,.82)" }}>
              年間を通じて温暖な恩納村で、ネットハウスを使った栽培を行っています。風通しと光をしっかり確保しながら、台風や害虫のリスクを抑えて。個性豊かな4品種のアテモヤを、ひと玉ずつ大切に育てています。
            </p>
          </Reveal>
          <Reveal delay={280}>
            <div className="facts">
              {FACTS.map((s) => (
                <div className="fact" key={s.v}>
                  <span className="fi"><Icon name={s.icon} /></span>
                  <div>
                    <b>{s.v}</b>
                    <small>{s.sub}</small>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <Reveal delay={160} className="farm-map">
          <image-slot id="farm-photo" placeholder="ハウス外観・農園風景の写真" radius="20" fit="cover"></image-slot>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ VARIETIES ============ */
function Varieties() {
  return (
    <section className="pad band" id="varieties">
      <div className="wrap" style={{ textAlign: "center" }}>
        <Reveal><Eyebrow center>Varieties</Eyebrow></Reveal>
        <Reveal delay={100}><h2 className="section-title">4品種のアテモヤ。</h2></Reveal>
        <Reveal delay={160}>
          <p className="lead" style={{ margin: "16px auto 0" }}>
            それぞれ果実の大きさや風味に個性があります。お好みに合わせてお選びいただけます。
          </p>
        </Reveal>
      </div>
      <div className="wrap">
        <div className="var-grid">
          {VARIETIES.map((v, i) => (
            <Reveal key={v.name} delay={(i % 2) * 100} className="vcard">
              <div className="vimg">
                <image-slot id={v.slot} placeholder={`${v.name}の果実`} fit="cover"></image-slot>
              </div>
              <div className="vbody">
                <div className="vtop">
                  <h3>{v.name}</h3>
                  {v.main && <span className="tag-main">MAIN</span>}
                </div>
                <span className="lat">{v.lat}</span>
                <p>{v.body}</p>
                <div className="vmeta">
                  {v.chips.map((c) => <span className="chip" key={c}>{c}</span>)}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ FEATURES / COMMITMENT ============ */
function Commitment() {
  return (
    <section className="pad" id="features">
      <div className="wrap">
        <Reveal><Eyebrow>Our Commitment</Eyebrow></Reveal>
        <Reveal delay={100}><h2 className="section-title">良質な一玉のための、<br />4つのこだわり。</h2></Reveal>
        <div className="commit-list">
          {COMMITMENTS.map((c, i) => (
            <Reveal key={c.n} delay={(i % 2) * 90} className="commit">
              <span className="cn">{c.n}</span>
              <div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <div className="band-green pad-sm" style={{ marginTop: "clamp(60px,9vh,110px)", borderRadius: 0 }}>
        <div className="wrap">
          <Reveal><Eyebrow>Harvest Season</Eyebrow></Reveal>
          <Reveal delay={100}>
            <h2 className="section-title" style={{ color: "var(--paper)", margin: "14px 0 6px" }}>
              旬は、冬から春へ。
            </h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead" style={{ color: "rgba(251,248,240,.8)" }}>
              市場価値・果実品質が最も高まる12月〜翌3月を中心に収穫します。
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div className="cal">
              {MONTHS.map((m) => (
                <div className={`mo ${m.on ? "on" : ""}`} key={m.m}>
                  <b>{m.m}</b>{m.on ? "収穫" : "—"}
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============ GALLERY ============ */
function Gallery({ onView }) {
  return (
    <section className="pad band" id="gallery">
      <div className="wrap" style={{ textAlign: "center" }}>
        <Reveal><Eyebrow center>Gallery</Eyebrow></Reveal>
        <Reveal delay={100}><h2 className="section-title">農園の風景。</h2></Reveal>
        <Reveal delay={160}>
          <p className="lead" style={{ margin: "16px auto 0" }}>
            画像をドラッグ＆ドロップ、またはクリックして写真を差し込めます。
          </p>
        </Reveal>
      </div>
      <div className="wrap">
        <div className="gal">
          {GALLERY.map((g) => (
            <image-slot key={g.slot} id={g.slot} class={g.cls} placeholder={g.ph} fit="cover" radius="14"></image-slot>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, MobileMenu, Hero, Strip, About, Farm, Varieties, Commitment, Gallery });