/* Her Nail — shared UI components (registered to window) */

const { useState, useEffect, useRef } = React;

/* ========== Nav ========== */
function Nav({ route, go, variant }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    { k: "concept",  label: "コンセプト", en: "CONCEPT" },
    { k: "campaign", label: "キャンペーン", en: "CAMPAIGN" },
    { k: "menu",     label: "メニュー",   en: "MENU" },
    { k: "flow",     label: "ご利用の流れ", en: "FLOW" },
    { k: "voice",    label: "お客様の声", en: "VOICE" },
    { k: "faq",      label: "よくある質問", en: "FAQ" },
  ];
  const nav = (k) => {
    setOpen(false);
    if (k === "campaign") {
      // Scroll to campaign section on home page
      try { sessionStorage.setItem("hn:scrollTo", "campaign"); } catch {}
      if (window.location.hash !== "#campaign") {
        // Use go to navigate home, then the HomePage effect will scroll
      }
      go("home");
      return;
    }
    go(k);
  };
  return (
    <React.Fragment>
    <nav className="nav" style={{ background: route === "home" ? "transparent" : "rgba(251,246,245,0.88)", backdropFilter: route === "home" ? "none" : "blur(10px)", color: "var(--ink-soft)" }}>
      <a href="#" onClick={(e)=>{e.preventDefault(); nav("home");}} className="nav-logo">
        Her <em>Nail</em>
      </a>
      <ul className="nav-links">
        {items.map(it => (
          <li key={it.k}>
            <a href="#" onClick={(e)=>{e.preventDefault(); nav(it.k);}} className={route===it.k?"active":""}>{it.en}</a>
          </li>
        ))}
      </ul>
      <a href="#" onClick={(e)=>{e.preventDefault(); go("apply");}} className="nav-cta">お申込み</a>
      <button className={"nav-menu-btn " + (open ? "open" : "")} onClick={()=>setOpen(o=>!o)} aria-label="menu">
        <span/><span/><span/>
      </button>
    </nav>
    <div className={"nav-mobile " + (open ? "open" : "")}>
      {items.map(it => (
        <a key={it.k} href="#" onClick={(e)=>{e.preventDefault(); nav(it.k);}}>
          <span>{it.label}</span>
          <span className="en">{it.en}</span>
        </a>
      ))}
      <button className="apply-btn" onClick={()=>nav("apply")}>お申込み — APPLY</button>
    </div>
    </React.Fragment>
  );
}

/* ========== Footer ========== */
function Footer({ go }) {
  return (
    <footer style={{ background: "var(--peach-2)", color: "var(--ink)", padding: "80px 44px 40px", overflow: "hidden" }}>
      <div className="container footer-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48 }}>
        <div>
          <div style={{ fontFamily: "var(--serif-en)", fontSize: 32, letterSpacing: "0.2em", fontWeight: 300 }}>
            Her <em style={{ color: "var(--rose-deep)" }}>Nail</em>
          </div>
          <p style={{ marginTop: 20, fontFamily: "var(--serif-jp)", fontSize: 13, lineHeight: 2, color: "rgba(58,42,45,0.72)", letterSpacing: "0.08em" }}>
            大切なお婆様への、<br/>いつまでも美しくあることを願う、<br/>ビューティーギフト。
          </p>
        </div>
        <FooterCol title="SERVICE" items={[
          ["コンセプト", "concept"],["メニュー", "menu"],["ご利用の流れ", "flow"],["対応エリア", "area"],
        ]} go={go} />
        <FooterCol title="SUPPORT" items={[
          ["お客様の声", "voice"],["よくある質問", "faq"],["お申込み", "apply"],
        ]} go={go} />
        <div>
          <div className="tag-en" style={{ color: "var(--rose-deep)", marginBottom: 16 }}>CONTACT</div>
          <div style={{ fontFamily: "var(--serif-jp)", fontSize: 13, lineHeight: 2, color: "rgba(58,42,45,0.82)", letterSpacing: "0.05em" }}>
            平日 10:00 – 18:00<br/>
            info@hernail.jp
          </div>
        </div>
      </div>
      <div style={{ marginTop: 80, paddingTop: 28, borderTop: "1px solid rgba(58,42,45,0.18)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(58,42,45,0.55)" }}>
        <span>© 2026 Her Nail.  All rights reserved.</span>
        <span>Beauty Gifting Service for Grandmothers</span>
      </div>
    </footer>
  );
}
function FooterCol({ title, items, go }) {
  return (
    <div>
      <div className="tag-en" style={{ color: "var(--rose-deep)", marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map(([label, k]) => (
          <li key={k}>
            <a href="#" onClick={(e)=>{e.preventDefault(); go(k);}} style={{ fontFamily: "var(--serif-jp)", fontSize: 13, color: "rgba(58,42,45,0.82)", letterSpacing: "0.08em" }}>{label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ========== Section Title (reused) ========== */
function SectionTitle({ en, jp, sub, align = "left" }) {
  return (
    <div style={{ textAlign: align, marginBottom: 56 }}>
      <div className="tag-en" style={{ color: "var(--rose-deep)" }}>{en}</div>
      <h2 className="h-section" style={{ margin: "12px 0 0" }}>{jp}</h2>
      {sub && <p className="body-jp" style={{ marginTop: 16, maxWidth: 600, marginLeft: align==="center"?"auto":0, marginRight: align==="center"?"auto":0 }}>{sub}</p>}
    </div>
  );
}

/* ========== Hero illustration placeholder (grandma + granddaughter) ========== */
function HeroIllustration({ variant = "warm" }) {
  // Abstract color-field representation with mono-labeled placeholder
  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      <div className="cf cf-rose" style={{ position: "absolute", inset: 0 }}>
        {/* Soft silhouette hint — two curved shapes */}
        <svg viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.55 }}>
          <defs>
            <radialGradient id="g1" cx="50%" cy="30%">
              <stop offset="0%" stopColor="#fff" stopOpacity="0.7"/>
              <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <ellipse cx="380" cy="320" rx="130" ry="170" fill="#f5d9cf" opacity="0.7"/>
          <ellipse cx="230" cy="440" rx="110" ry="140" fill="#e8c4b8" opacity="0.55"/>
          <rect width="600" height="800" fill="url(#g1)"/>
        </svg>
        <div style={{
          position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)",
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase",
          color: "rgba(90, 69, 63, 0.55)", textAlign: "center", lineHeight: 2,
        }}>
          [ Hero illustration ]<br/>
          <span style={{ letterSpacing: "0.15em" }}>granddaughter + grandmother,</span><br/>
          <span style={{ letterSpacing: "0.15em" }}>looking at painted nails.</span>
        </div>
      </div>
      {/* floating accent: nail polish bottle silhouette */}
      <div style={{
        position: "absolute", right: "12%", bottom: "14%",
        width: 90, height: 140, display: "flex", alignItems: "flex-end", justifyContent: "center",
      }}>
        <svg viewBox="0 0 80 120" width="70">
          <rect x="30" y="4" width="20" height="18" fill="#c9a885" rx="2"/>
          <rect x="32" y="22" width="16" height="8" fill="#8a6b63"/>
          <path d="M18 40 Q18 34 24 34 L56 34 Q62 34 62 40 L62 108 Q62 114 56 114 L24 114 Q18 114 18 108 Z" fill="#b8857a" opacity="0.92"/>
          <path d="M24 46 Q28 42 34 44" stroke="rgba(255,255,255,0.5)" strokeWidth="2" fill="none" strokeLinecap="round"/>
        </svg>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, SectionTitle, HeroIllustration, FooterCol });