/* ============================================================
   L'angelot — page sections
   exports: Header, Hero, Products, OrderFlow, Care, Reviews, FAQ, Contact, Footer
   ============================================================ */
const { useState: sx_useState, useEffect: sx_useEffect } = React;

/* small arrow */
function Arrow({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ---------------- Header ---------------- */
function Header({ t, lang, setLang }) {
  const [scrolled, setScrolled] = sx_useState(false);
  const [menuOpen, setMenuOpen] = sx_useState(false);
  sx_useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? "scrolled" : ""}`}>
      <nav className="nav">
        <a href="#top" className="brand">
          L'angelot
          <small>Leather Dog Tags</small>
        </a>
        <ul className={`nav-links ${menuOpen ? "open" : ""}`}>
          {t.nav.links.map((l) => (
            <li key={l.id}><a href={`#${l.id}`} onClick={() => setMenuOpen(false)}>{l.label}</a></li>
          ))}
          <li className="nav-mobile-only"><a href="#contact" onClick={() => setMenuOpen(false)}>{t.nav.cta}</a></li>
        </ul>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={lang === "jp" ? "active" : ""} onClick={() => setLang("jp")}>JP</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="#contact" className="btn btn-ghost nav-cta-desktop" style={{ padding: "0.7em 1.3em" }}>{t.nav.cta}</a>
          <button className="nav-toggle" onClick={() => setMenuOpen((o) => !o)} aria-label="menu">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M3 6h16M3 11h16M3 16h16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
          </button>
        </div>
      </nav>
    </header>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ t }) {
  const h = t.hero;
  return (
    <section className="hero" id="top">
      <div className="hero-glow"></div>
      <div className="wrap" style={{ width: "100%" }}>
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="eyebrow reveal">{h.eyebrow}</span>
            <h1 className="reveal">{h.h1a}<br /><span className="accent">{h.h1b}</span></h1>
            <p className="hero-sub reveal">{h.sub}</p>
            <div className="hero-cta reveal">
              <a href="#customizer" className="btn btn-primary btn-arrow">{h.cta1}<Arrow /></a>
              <a href="#products" className="btn btn-ghost">{h.cta2}</a>
            </div>
            <div className="hero-meta reveal">
              {h.meta.map((m, i) => (
                <div className="item" key={i}>
                  <div className="n">{m.n}</div>
                  <div className="l">{m.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="hero-visual reveal">
            <div className="hero-frame">
              <image-slot id="hero-main" shape="rect" src="assets/anela.jpg" placeholder={h.photo}></image-slot>
            </div>
            <div className="hero-badge">
              <span className="seal">{h.seal}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Products ---------------- */
function Products({ t }) {
  const p = t.products;
  return (
    <section className="section" id="products">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">{p.eyebrow}</span>
          <h2 className="sec-title">{p.title}</h2>
          <p className="sec-lead" style={{ textAlign: "center" }}>{p.lead}</p>
        </div>
        <div className="product-grid">
          {p.items.map((item, i) => (
            <article className="product-card reveal" key={i} style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="pc-img">
                {item.tag && <span className="pc-tag">{item.tag}</span>}
                <image-slot id={`product-${i}`} shape="rect" src={i === 0 ? "assets/anela.jpg" : undefined} placeholder={`${item.en}`}></image-slot>
              </div>
              <div className="pc-body">
                <div className="pc-en">{item.en}</div>
                <h3 className="pc-name">{item.name}</h3>
                <p className="pc-desc">{item.desc}</p>
                <div className="pc-foot">
                  <div className="pc-price">{item.price} <small>{p.unit}</small></div>
                  <a href="#customizer" className="pc-buy">{p.buy} <Arrow size={13} /></a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Order Flow ---------------- */
function OrderFlow({ t }) {
  const f = t.flow;
  return (
    <section className="section" id="flow" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">{f.eyebrow}</span>
          <h2 className="sec-title">{f.title}</h2>
          <p className="sec-lead">{f.lead}</p>
        </div>
        <div className="flow-grid">
          {f.steps.map((s, i) => (
            <div className="flow-step reveal" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="fs-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="fs-line"></div>
              <span className="fs-en">{s.en}</span>
              <h3 className="fs-title">{s.title}</h3>
              <p className="fs-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Care ---------------- */
function Care({ t }) {
  const c = t.care;
  const icons = [
    <path key="1" d="M12 3c4 5 6 7 6 10a6 6 0 1 1-12 0c0-3 2-5 6-10z" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinejoin="round" />,
    <g key="2" stroke="currentColor" strokeWidth="1.3" fill="none"><circle cx="12" cy="12" r="3.2" /><path d="M12 4v2M12 18v2M4 12h2M18 12h2M6.5 6.5l1.4 1.4M16.1 16.1l1.4 1.4M17.5 6.5l-1.4 1.4M7.9 16.1l-1.4 1.4" strokeLinecap="round" /></g>,
    <g key="3" stroke="currentColor" strokeWidth="1.3" fill="none"><path d="M4 19h16M6 19V9l6-4 6 4v10" strokeLinejoin="round" /><path d="M10 19v-4h4v4" /></g>,
    <g key="4" stroke="currentColor" strokeWidth="1.3" fill="none"><path d="M12 4l2.2 4.6 5 .7-3.6 3.5.9 5L12 15.9 7.5 17.8l.9-5L4.8 9.3l5-.7z" strokeLinejoin="round" /></g>,
  ];
  return (
    <section className="section" id="care">
      <div className="wrap">
        <div className="care-wrap">
          <div className="care-visual reveal">
            <image-slot id="care-main" shape="rect" placeholder={c.photo}></image-slot>
          </div>
          <div>
            <div className="section-head reveal" style={{ marginBottom: "30px" }}>
              <span className="eyebrow">{c.eyebrow}</span>
              <h2 className="sec-title">{c.title}</h2>
              <p className="sec-lead">{c.lead}</p>
            </div>
            <div className="care-list">
              {c.items.map((item, i) => (
                <div className="care-item reveal" key={i} style={{ transitionDelay: `${i * 60}ms` }}>
                  <div className="ci-ico">
                    <svg width="22" height="22" viewBox="0 0 24 24">{icons[i]}</svg>
                  </div>
                  <div>
                    <h3 className="ci-title">{item.title}</h3>
                    <p className="ci-desc">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Reviews ---------------- */
function Reviews({ t }) {
  const r = t.reviews;
  return (
    <section className="section" id="reviews" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">{r.eyebrow}</span>
          <h2 className="sec-title">{r.title}</h2>
          <p className="sec-lead" style={{ textAlign: "center" }}>{r.lead}</p>
        </div>
        <div className="review-grid">
          {r.items.map((item, i) => (
            <article className="review-card reveal" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="stars">★★★★★</div>
              <p className="quote">“{item.quote}”</p>
              <div className="who">
                <div className="av"><image-slot id={`review-${i}`} shape="circle" placeholder="dog"></image-slot></div>
                <div className="meta">
                  <div className="n">{item.name}</div>
                  <div className="d">{item.dog}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQ({ t }) {
  const f = t.faq;
  const [open, setOpen] = sx_useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="faq-wrap">
          <div className="section-head reveal" style={{ marginBottom: 0 }}>
            <span className="eyebrow">{f.eyebrow}</span>
            <h2 className="sec-title">{f.title}</h2>
            <p className="sec-lead">{f.lead}</p>
          </div>
          <div className="faq-list reveal">
            {f.items.map((item, i) => (
              <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="qn">{String(i + 1).padStart(2, "0")}</span>
                  <span>{item.q}</span>
                  <span className="qi"></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{item.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Contact ---------------- */
function Contact({ t }) {
  const c = t.contact;
  const [sent, setSent] = sx_useState(false);
  return (
    <section className="section contact" id="contact">
      <div className="wrap">
        <div className="contact-wrap">
          <div className="reveal">
            <div className="section-head" style={{ marginBottom: "34px" }}>
              <span className="eyebrow">{c.eyebrow}</span>
              <h2 className="sec-title">{c.title}</h2>
              <p className="sec-lead">{c.lead}</p>
            </div>
            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="form-row">
                <div className="form-field">
                  <label>{c.nameLabel}</label>
                  <input type="text" required />
                </div>
                <div className="form-field">
                  <label>{c.emailLabel}</label>
                  <input type="email" required />
                </div>
              </div>
              <div className="form-field">
                <label>{c.typeLabel}</label>
                <select>
                  {c.typeOptions.map((o, i) => <option key={i}>{o}</option>)}
                </select>
              </div>
              <div className="form-field">
                <label>{c.msgLabel}</label>
                <textarea placeholder={c.msgPh}></textarea>
              </div>
              {sent && <div className="form-success">{c.success}</div>}
              <button type="submit" className="btn btn-primary btn-arrow" style={{ alignSelf: "flex-start" }}>{c.submit}<Arrow /></button>
            </form>
          </div>
          <div className="contact-aside reveal">
            {c.asides.map((a, i) => (
              <div className="ca-card" key={i}>
                <h4>{a.h}</h4>
                <p style={{ whiteSpace: "pre-line" }}>{a.p}</p>
              </div>
            ))}
            <div className="ca-card" style={{ padding: 0, border: "none" }}>
              <div style={{ aspectRatio: "16/10", borderRadius: "4px", overflow: "hidden", border: "1px solid var(--line-soft)" }}>
                <image-slot id="atelier" shape="rect" placeholder="アトリエ / 工房の写真" style={{ width: "100%", height: "100%" }}></image-slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer({ t }) {
  const f = t.footer;
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#top" className="brand">L'angelot<small>Leather Dog Tags</small></a>
            <p>{f.tagline}</p>
          </div>
          {f.cols.map((col, i) => (
            <div className="footer-col" key={i}>
              <h5>{col.h}</h5>
              {col.links.map((l, j) => <a href="#" key={j}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <p>{f.copyright}</p>
          <div style={{ display: "flex", gap: "22px" }}>
            {f.legal.map((l, i) => <p key={i} style={{ cursor: "pointer" }}>{l}</p>)}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, Products, OrderFlow, Care, Reviews, FAQ, Contact, Footer, Arrow });