// app.jsx — L'agence de la Passion landing page

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "palette": ["#FAF4F4", "#EDE4DE", "#1C1C1C", "#9C6B5C"],
  "displayFont": "Cormorant Garamond",
  "heroLayout": "image-right",
  "showSoftBands": true,
  "showCursor": true
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────────────────
// Small primitives

function Eyebrow({ children, color }) {
  return (
    <div className="eyebrow" style={color ? { color } : undefined}>
      {children}
    </div>
  );
}

function Divider({ wide = false }) {
  return <div className={`divider ${wide ? "divider--wide" : ""}`} aria-hidden="true" />;
}

function CTA({ children, href = "#contact", variant = "solid", onClick }) {
  return (
    <a
      className={`cta cta--${variant}`}
      href={href}
      onClick={onClick}
    >
      <span className="cta__label">{children}</span>
      <span className="cta__arrow" aria-hidden="true">
        <svg viewBox="0 0 24 12" width="22" height="11">
          <path d="M0 6 H22 M17 1 L22 6 L17 11" fill="none" stroke="currentColor" strokeWidth="1" />
        </svg>
      </span>
    </a>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Header

function Header({ lang, setLang, onScrollTo }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const C = COPY[lang];

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "home", label: C.nav.home },
    { id: "story", label: C.nav.story },
    { id: "gentlemen", label: C.nav.gentlemen },
    { id: "conversations", label: C.nav.conversations },
    { id: "testimonials", label: C.nav.testimonials },
    { id: "contact", label: C.nav.contact },
  ];

  return (
    <header className={`hdr ${scrolled ? "hdr--scrolled" : ""}`} data-screen-label="Header">
      <div className="hdr__inner">
        <a className="hdr__mark" href="#home" onClick={(e) => { e.preventDefault(); onScrollTo("home"); }}>
          <span className="hdr__mark-letter">L'</span>
          <span className="hdr__mark-rest">agence de la Passion</span>
        </a>

        <nav className="hdr__nav" aria-label="Primary">
          {links.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              onClick={(e) => { e.preventDefault(); onScrollTo(l.id); }}
              className="hdr__link"
            >
              {l.label}
            </a>
          ))}
        </nav>

        <div className="hdr__right">
          <div className="lang" role="group" aria-label="Language">
            <button
              className={`lang__btn ${lang === "en" ? "is-active" : ""}`}
              onClick={() => setLang("en")}
              aria-pressed={lang === "en"}
            >EN</button>
            <span className="lang__sep" aria-hidden="true">|</span>
            <button
              className={`lang__btn ${lang === "de" ? "is-active" : ""}`}
              onClick={() => setLang("de")}
              aria-pressed={lang === "de"}
            >DE</button>
          </div>
          <button
            className={`hdr__burger ${open ? "is-open" : ""}`}
            aria-label="Menu"
            onClick={() => setOpen((o) => !o)}
          >
            <span></span><span></span>
          </button>
        </div>
      </div>

      {open && (
        <div className="hdr__mobile">
          {links.map((l) => (
            <a key={l.id} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); onScrollTo(l.id); setOpen(false); }}>
              {l.label}
            </a>
          ))}
        </div>
      )}
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Sections

function Hero({ lang, heroLayout, onScrollTo }) {
  const C = COPY[lang].hero;
  const imgFirst = heroLayout === "image-left";
  return (
    <section id="home" className="sec hero" data-screen-label="01 Hero">
      <div className={`hero__grid ${imgFirst ? "hero__grid--imgleft" : ""}`}>
        <div className="hero__text">
          <Eyebrow>{C.eyebrow}</Eyebrow>
          <h1 className="display hero__title">
            L'agence<br />
            <em>de la</em> Passion
          </h1>
          <p className="hero__tag">{C.tagline}</p>
          <div className="hero__cta">
            <CTA onClick={(e) => { e.preventDefault(); onScrollTo("contact"); }}>{C.cta}</CTA>
          </div>
        </div>
        <figure className="hero__media">
          <img src="assets/gentleman-cuff.webp" alt="" />
          <figcaption className="hero__caption">
            <span>I.</span><span>Quiet hours, considered.</span>
          </figcaption>
        </figure>
      </div>
      <a className="hero__scroll" href="#what" onClick={(e) => { e.preventDefault(); onScrollTo("what"); }}>
        <span>{C.scroll}</span>
        <span className="hero__scroll-line" aria-hidden="true" />
      </a>
    </section>
  );
}

function WhatItIs({ lang }) {
  const C = COPY[lang].what;
  return (
    <section id="what" className="sec what" data-screen-label="02 What it is">
      <div className="what__grid">
        <div className="what__label">
          <Eyebrow>{C.eyebrow}</Eyebrow>
          <div className="what__index">001 / 006</div>
        </div>
        <div className="what__body">
          <h2 className="display display--md">{C.title}</h2>
          {C.body.map((p, i) => (
            <p key={i} className="what__p">{p}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

function SoftCTA({ lang, onScrollTo, index }) {
  const C = COPY[lang].softCta;
  return (
    <div className="softcta" role="complementary">
      <div className="softcta__inner">
        <span className="softcta__idx">{index}</span>
        <p className="softcta__line">{C.line}</p>
        <a className="softcta__link" href="#contact" onClick={(e) => { e.preventDefault(); onScrollTo("contact"); }}>
          {C.cta}
          <svg viewBox="0 0 24 12" width="20" height="10" aria-hidden="true">
            <path d="M0 6 H22 M17 1 L22 6 L17 11" fill="none" stroke="currentColor" strokeWidth="1" />
          </svg>
        </a>
      </div>
    </div>
  );
}

function Story({ lang }) {
  const C = COPY[lang].story;
  return (
    <section id="story" className="sec story" data-screen-label="03 Story">
      <div className="story__grid">
        <figure className="story__media">
          <img src="assets/gentleman-seated.webp" alt="" />
          <figcaption className="story__caption">
            <span>II.</span><span>A pause, before & after.</span>
          </figcaption>
        </figure>
        <div className="story__text">
          <Eyebrow>{C.eyebrow}</Eyebrow>
          <h2 className="display display--md">{C.title}</h2>
          <div className="story__label">{C.label}</div>
          <div className="story__body">
            {C.paragraphs.map((p, i) => (
              <p key={i} className={i === 0 ? "story__lead" : ""}>{p}</p>
            ))}
            <p className="story__sig">{C.signature}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Gentlemen({ lang }) {
  const C = COPY[lang].gentlemen;
  return (
    <section id="gentlemen" className="sec gentlemen" data-screen-label="04 Gentlemen">
      <div className="gentlemen__head">
        <Eyebrow>{C.eyebrow}</Eyebrow>
        <h2 className="display display--md">{C.title}</h2>
        <p className="gentlemen__intro">{C.body}</p>
      </div>
      <div className="gentlemen__grid">
        {C.cards.map((g, i) => (
          <article className="gent" key={i}>
            <div className="gent__plate" aria-hidden="true">
              <span className="gent__initial">{g.initial}</span>
              <span className="gent__num">{String(i + 1).padStart(2, "0")}</span>
            </div>
            <div className="gent__meta">
              <h3 className="gent__name">{g.name}</h3>
              <div className="gent__age">{g.age}</div>
              <ul className="gent__tags">
                {g.tags.map((t, j) => <li key={j}>{t}</li>)}
              </ul>
              <p className="gent__bio">{g.bio}</p>
            </div>
          </article>
        ))}
      </div>
      <p className="gentlemen__note">{C.note}</p>
    </section>
  );
}

function Conversations({ lang }) {
  const C = COPY[lang].bff;
  return (
    <section id="conversations" className="sec conversations" data-screen-label="05 Conversations">
      <div className="conv__grid">
        <div className="conv__head">
          <Eyebrow>{C.eyebrow}</Eyebrow>
          <h2 className="display display--md">{C.title}</h2>
        </div>
        <div className="conv__body">
          {C.body.map((p, i) => (
            <p key={i} className={i === 0 ? "conv__lead" : ""}>{p}</p>
          ))}
        </div>
        <ul className="conv__list">
          {C.bullets.map((b, i) => (
            <li key={i} className="conv__row">
              <div className="conv__rowNum">{String(i + 1).padStart(2, "0")}</div>
              <div className="conv__rowLabel">{b.label}</div>
              <div className="conv__rowText">{b.text}</div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Testimonials({ lang }) {
  const C = COPY[lang].testimonials;
  const [active, setActive] = useState(0);
  const total = C.quotes.length;
  return (
    <section id="testimonials" className="sec testimonials" data-screen-label="06 Voices">
      <div className="test__head">
        <Eyebrow>{C.eyebrow}</Eyebrow>
        <h2 className="display display--md">{C.title}</h2>
      </div>
      <div className="test__stage">
        <div className="test__quote-wrap">
          {C.quotes.map((q, i) => (
            <blockquote
              key={i}
              className={`test__quote ${i === active ? "is-active" : ""}`}
              aria-hidden={i !== active}
            >
              <span className="test__open" aria-hidden="true">“</span>
              <p className="test__text">{q.text}</p>
              <footer className="test__by">
                <span className="test__name">{q.name}</span>
                <span className="test__meta">{q.meta}</span>
              </footer>
            </blockquote>
          ))}
        </div>
        <div className="test__nav">
          <div className="test__count">
            <span>{String(active + 1).padStart(2, "0")}</span>
            <span className="test__count-sep" aria-hidden="true">/</span>
            <span>{String(total).padStart(2, "0")}</span>
          </div>
          <div className="test__dots" role="tablist">
            {C.quotes.map((_, i) => (
              <button
                key={i}
                role="tab"
                aria-selected={i === active}
                aria-label={`Quote ${i + 1}`}
                className={`test__dot ${i === active ? "is-active" : ""}`}
                onClick={() => setActive(i)}
              />
            ))}
          </div>
          <button
            className="test__arrow"
            aria-label="Next quote"
            onClick={() => setActive((a) => (a + 1) % total)}
          >
            <svg viewBox="0 0 24 12" width="28" height="14">
              <path d="M0 6 H22 M17 1 L22 6 L17 11" fill="none" stroke="currentColor" strokeWidth="1" />
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}

function Contact({ lang }) {
  const C = COPY[lang].contact;
  const [form, setForm] = useState({ name: "", email: "", message: "", consent: false });
  const [sent, setSent] = useState(false);
  const onChange = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (!form.consent || !form.email || !form.message) return;
    setSent(true);
  };
  return (
    <section id="contact" className="sec contact" data-screen-label="07 Contact">
      <div className="contact__grid">
        <div className="contact__head">
          <Eyebrow>{C.eyebrow}</Eyebrow>
          <h2 className="display display--md">{C.title}</h2>
          <p className="contact__body">{C.body}</p>
          <div className="contact__direct">
            <div className="contact__directLabel">{C.direct.label}</div>
            <a className="contact__email" href={`mailto:${C.direct.email}`}>{C.direct.email}</a>
            <div className="contact__hours">{C.direct.hours}</div>
          </div>
        </div>
        <form className="contact__form" onSubmit={submit} noValidate>
          {sent ? (
            <div className="contact__sent" role="status">
              <div className="contact__sentMark" aria-hidden="true">
                <svg viewBox="0 0 32 32" width="40" height="40">
                  <path d="M6 16 L14 23 L26 9" stroke="currentColor" strokeWidth="1.2" fill="none" />
                </svg>
              </div>
              <p>{C.form.sent}</p>
            </div>
          ) : (
            <React.Fragment>
              <label className="field">
                <span className="field__label">{C.form.name}</span>
                <input type="text" value={form.name} onChange={onChange("name")} autoComplete="off" />
              </label>
              <label className="field">
                <span className="field__label">{C.form.email}</span>
                <input type="email" value={form.email} onChange={onChange("email")} autoComplete="off" required />
              </label>
              <label className="field">
                <span className="field__label">{C.form.message}</span>
                <textarea rows="4" value={form.message} onChange={onChange("message")} placeholder={C.form.placeholder} required />
              </label>
              <label className="check">
                <input type="checkbox" checked={form.consent} onChange={onChange("consent")} />
                <span className="check__box" aria-hidden="true" />
                <span className="check__label">{C.form.consent}</span>
              </label>
              <button type="submit" className="cta cta--solid cta--full">
                <span className="cta__label">{C.form.send}</span>
                <span className="cta__arrow" aria-hidden="true">
                  <svg viewBox="0 0 24 12" width="22" height="11">
                    <path d="M0 6 H22 M17 1 L22 6 L17 11" fill="none" stroke="currentColor" strokeWidth="1" />
                  </svg>
                </span>
              </button>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer({ lang }) {
  const C = COPY[lang].footer;
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer__top">
        <div className="footer__brand">
          <div className="footer__mark">L'agence de la Passion</div>
          <p className="footer__tag">{C.tag}</p>
        </div>
        <div className="footer__cities">{C.cities}</div>
      </div>
      <div className="footer__rule" />
      <div className="footer__bot">
        <div className="footer__copy">{C.copy}</div>
        <ul className="footer__links">
          {C.links.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}
        </ul>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Cursor

function SoftCursor() {
  const ref = useRef(null);
  const dotRef = useRef(null);
  useEffect(() => {
    let raf = 0;
    let x = -100, y = -100, tx = -100, ty = -100;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const onOver = (e) => {
      const interactive = e.target.closest("a, button, input, textarea, label.check");
      if (ref.current) ref.current.classList.toggle("is-hover", !!interactive);
    };
    const tick = () => {
      x += (tx - x) * 0.18;
      y += (ty - y) * 0.18;
      if (ref.current) ref.current.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      if (dotRef.current) dotRef.current.style.transform = `translate(${tx}px, ${ty}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseover", onOver);
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseover", onOver);
      cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <React.Fragment>
      <div className="cursor cursor--ring" ref={ref} aria-hidden="true" />
      <div className="cursor cursor--dot" ref={dotRef} aria-hidden="true" />
    </React.Fragment>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Tweaks UI

function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Language" />
      <TweakRadio
        label="Default"
        value={t.lang}
        options={["en", "de"]}
        onChange={(v) => setTweak("lang", v)}
      />

      <TweakSection label="Palette" />
      <TweakColor
        label="Theme"
        value={t.palette}
        options={[
          ["#FAF4F4", "#EDE4DE", "#1C1C1C", "#9C6B5C"],
          ["#F5F0EA", "#E5DCD2", "#1C1C1C", "#7A4A36"],
          ["#F7F4EE", "#E8E1D3", "#1F1A14", "#A37A4F"],
          ["#F2EFEC", "#DDD7D1", "#191919", "#6B6259"],
        ]}
        onChange={(v) => setTweak("palette", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Display font"
        value={t.displayFont}
        options={["Cormorant Garamond", "Playfair Display", "EB Garamond", "DM Serif Display"]}
        onChange={(v) => setTweak("displayFont", v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Hero"
        value={t.heroLayout}
        options={["image-right", "image-left"]}
        onChange={(v) => setTweak("heroLayout", v)}
      />
      <TweakToggle
        label="Soft contrast bands"
        value={t.showSoftBands}
        onChange={(v) => setTweak("showSoftBands", v)}
      />
      <TweakToggle
        label="Custom cursor"
        value={t.showCursor}
        onChange={(v) => setTweak("showCursor", v)}
      />
    </TweaksPanel>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// App

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(t.lang || "en");

  // sync default lang from tweaks
  useEffect(() => { setLang(t.lang); }, [t.lang]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 64;
    window.scrollTo({ top, behavior: "smooth" });
  };

  // CSS variables driven by tweaks
  useEffect(() => {
    const [bg, band, ink, accent] = t.palette;
    const root = document.documentElement;
    root.style.setProperty("--bg", bg);
    root.style.setProperty("--band", band);
    root.style.setProperty("--ink", ink);
    root.style.setProperty("--accent", accent);
    root.style.setProperty("--display-font", `"${t.displayFont}", "Cormorant Garamond", serif`);
    root.classList.toggle("no-bands", !t.showSoftBands);
    root.classList.toggle("no-cursor", !t.showCursor);
  }, [t.palette, t.displayFont, t.showSoftBands, t.showCursor]);

  return (
    <React.Fragment>
      <Header lang={lang} setLang={setLang} onScrollTo={scrollTo} />
      <main>
        <Hero lang={lang} heroLayout={t.heroLayout} onScrollTo={scrollTo} />
        <WhatItIs lang={lang} />
        <SoftCTA lang={lang} onScrollTo={scrollTo} index="I." />
        <Story lang={lang} />
        <Gentlemen lang={lang} />
        <SoftCTA lang={lang} onScrollTo={scrollTo} index="II." />
        <Conversations lang={lang} />
        <Testimonials lang={lang} />
        <SoftCTA lang={lang} onScrollTo={scrollTo} index="III." />
        <Contact lang={lang} />
      </main>
      <Footer lang={lang} />
      {t.showCursor && <SoftCursor />}
      <TweaksUI t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);