// Page components for WAKEDIAMOND
const { Reveal, DiamondMark, WaterCanvas } = window;

// ============ HOME ============
const HomePage = ({ t, tweaks, go }) => {
  const v = tweaks.heroVariant || "floating";
  return (
    <>
      {/* HERO */}
      <section className={`hero hero-${v}`}>
        {v !== "fullbleed" && <WaterCanvas accent={tweaks.accent} />}
        {v !== "fullbleed" && <div className="hero-grid" />}

        {v === "fullbleed" &&
        <div className="hero-fb-bg">
            <img src="assets/board-top.jpg" alt="Diamond Skim — top view" />
            <div className="hero-fb-shade" />
          </div>
        }

        <div className="hero-meta">
          <span><span className="pulse" />{t.heroMeta1}</span>
          <span>{t.heroMeta2}</span>
          <span>{t.heroMeta3}</span>
        </div>

        {v === "floating" &&
        <div className="hero-logo-mark">
            <img src="assets/logo-wakediamond.svg" alt="WAKEDIAMOND Surfboards" />
          </div>
        }

        {v === "typeled" &&
        <div className="hero-typeled-board">
            <img src="assets/board-standing.jpg" alt="Diamond Skim, standing" />
          </div>
        }

        <div className="hero-content">
          <div />
          <div className="hero-headline-wrap">
            <div className="hero-tag">{t.heroTag}</div>
            <h1 className="hero-headline" style={{ fontSize: "160px" }}>
              {t.heroLine1} <span className="it">{t.heroLine2}</span><br />
              <span className="stroke">{t.heroLine3}</span>
            </h1>
            <div className="hero-bottom">
              <p className="hero-lede">{t.heroLede}</p>
              <a href="#boards" onClick={go("boards")} className="hero-cta">
                {t.heroCta}
                <span className="arrow">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
                </span>
              </a>
              <div className="hero-stats">
                <span className="num">{t.statNum}</span>
                <span className="lab">{t.statLab}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {[...t.marquee, ...t.marquee, ...t.marquee].map((m, i) => {
            const palette = ["yellow", "green", "pink", "violet", "turquoise", "blue"];
            const color = palette[i % palette.length];
            return (
              <div key={i} className={`marquee-item ${i % 2 ? "dim" : ""}`}>
              <span className="diamond"><img src={`assets/diamond-${color}.svg`} alt="" /></span>
              <span>{m}</span>
            </div>);

          })}
        </div>
      </div>

      {/* BOARDS PREVIEW */}
      <section className="section boards" id="boards">
        <div className="sec-head">
          <Reveal className="sec-head-left">
            <div className="sec-num">01 / Kollektion <span>{t.boardsEyebrow}</span></div>
          </Reveal>
          <Reveal>
            <h2 className="sec-title">
              {t.boardsTitle1} <span className="it">{t.boardsTitle2}</span><br />
              {t.boardsTitle3} <span className="it">{t.boardsTitle4}</span>
            </h2>
          </Reveal>
        </div>

        <div className="boards-rail">
          {[
          { name1: t.board1Name1, name2: t.board1Name2, desc: t.board1Desc, specs: [t.board1Spec1, t.board1Spec2, t.board1Spec3], code: t.boardSpecCode1, price: t.boardSpecPrice1, photo: "assets/board-top.jpg" },
          { name1: t.board2Name1, name2: t.board2Name2, desc: t.board2Desc, specs: [t.board2Spec1, t.board2Spec2, t.board2Spec3], code: t.boardSpecCode2, price: t.boardSpecPrice2, photo: "assets/board-standing.jpg" }].
          map((b, i) =>
          <article key={i} className="board-card" onClick={(e) => {e.preventDefault();location.hash = "boards";}}>
              <div className="board-num">
                <span><strong>0{i + 1}</strong> / 02</span>
                <span>{b.code}</span>
              </div>
              <div className="board-visual">
                <img src={b.photo} alt={`${b.name1} ${b.name2}`} />
                <div className="board-visual-overlay" />
              </div>
              <div className="board-info">
                <h3 className="board-name">
                  <span className="non-it">{b.name1}</span><br />{b.name2}
                </h3>
                <div className="board-price">
                  <span>{t.boardSpecPrice}</span>
                  <strong>{b.price}</strong>
                </div>
              </div>
              <p className="board-desc">{b.desc}</p>
              <div className="board-specs">
                {b.specs.map(([lab, val], j) =>
              <div key={j}>
                    <span className="lab">{lab}</span>
                    <span className="val">{val}</span>
                  </div>
              )}
              </div>
            </article>
          )}
        </div>
      </section>

      {/* CRAFT TEASER */}
      <section className="section craft" id="craft-teaser">
        <div className="craft-grid">
          <Reveal className="craft-text">
            <div className="sec-num">02 / Atelier <span>{t.craftEyebrow}</span></div>
            <h2 className="craft-headline">
              {t.craftHeadline1} <span className="it">{t.craftHeadline2}</span><br />
              {t.craftHeadline3} <span className="it">{t.craftHeadline4}</span>
            </h2>
            <p className="craft-lede">{t.craftLede}</p>
            <div className="craft-stats">
              {[t.craftStat1, t.craftStat2, t.craftStat3].map(([n, l], i) =>
              <div key={i} className="stat">
                  <span className="n">{n}</span>
                  <span className="l">{l}</span>
                </div>
              )}
            </div>
            <a href="#craft" onClick={go("craft")} className="craft-cta">
              {t.craftCta}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
            </a>
          </Reveal>
          <Reveal className="craft-visual" delay={120}>
            <img src="assets/carbon-fiber.jpg" alt="Carbon fiber layup" className="craft-photo" />
            <div className="craft-visual-inner">
              <div className="corner">
                <span>WD · 047 / 12</span>
                <span>2026</span>
              </div>
              <div className="center" />
              <div className="corner">
                <span>Carbon Fiber 240gsm</span>
                <span>Lot · 047</span>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* PROCESS */}
      <section className="process">
        <div className="sec-head">
          <Reveal className="sec-head-left">
            <div className="sec-num">03 / Prozess <span>{t.processEyebrow}</span></div>
          </Reveal>
          <Reveal>
            <h2 className="sec-title">
              {t.processTitle1} <span className="it">{t.processTitle2}</span><br />
              {t.processTitle3} <span className="it">{t.processTitle4}</span>
            </h2>
          </Reveal>
        </div>
        <div className="process-list">
          {t.process.map((p, i) =>
          <Reveal key={i} delay={i * 80}>
              <div className="process-row">
                <span className="process-num">{p.num}</span>
                <span className="process-name">{p.name}</span>
                <span className="process-desc">{p.desc}</span>
                <span className="process-tag">{p.tag}</span>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section className="testimonial">
        <Reveal>
          <blockquote>
            "{t.quote1} <span className="it">{t.quote2}</span>{t.quote3}"
            <cite>{t.quoteCite}</cite>
          </blockquote>
        </Reveal>
      </section>

      {/* CONTACT TEASER */}
      <section className="contact">
        <Reveal>
          <div className="contact-diamond">
            <img src="assets/diamond-yellow.svg" alt="" />
          </div>
          <h2>
            {t.contactH1} <span className="it">{t.contactH2}</span>
          </h2>
          <p>{t.contactP}</p>
          <div className="contact-actions">
            <a href="mailto:info@wakediamond.ch" className="btn btn-primary">{t.contactCta1}</a>
            <a href="#contact" onClick={go("contact")} className="btn btn-ghost">{t.contactCta2}</a>
          </div>
        </Reveal>
      </section>
    </>);

};

// ============ BOARDS DETAIL ============
const BoardsPage = ({ t, tweaks, go }) => {
  const boards = [
  {
    name1: t.board1Name1, name2: t.board1Name2, desc: t.board1Desc,
    specs: [t.board1Spec1, t.board1Spec2, t.board1Spec3],
    code: t.boardSpecCode1, price: t.boardSpecPrice1,
    photos: ["assets/skim-green.png", "assets/skim-blue.png", "assets/skim-yellow.png", "assets/skim-pink.png"],
    detail: "assets/skim-detail-strip.jpg",
    sizes: [
    { len: "124.5 cm", w: "1.55 kg", code: "WD-DS-124" },
    { len: "133 cm", w: "1.60 kg", code: "WD-DS-133" },
    { len: "141 cm", w: "1.65 kg", code: "WD-DS-141" }] },

  {
    name1: t.board2Name1, name2: t.board2Name2, desc: t.board2Desc,
    specs: [t.board2Spec1, t.board2Spec2, t.board2Spec3],
    code: t.boardSpecCode2, price: t.boardSpecPrice2,
    photos: ["assets/surfer-lightblue.png", "assets/surfer-blue.png", "assets/surfer-red.png", "assets/surfer-purple.png"],
    detail: "assets/surfer-detail-strip.jpg",
    sizes: [
    { len: "124.5 cm", w: "1.65 kg", code: "WD-DSF-124" },
    { len: "133 cm", w: "1.70 kg", code: "WD-DSF-133" },
    { len: "141 cm", w: "1.75 kg", code: "WD-DSF-141" }] },

  {
    name1: t.board3Name1, name2: t.board3Name2, desc: t.board3Desc,
    specs: [t.board3Spec1, t.board3Spec2, t.board3Spec3],
    code: t.boardSpecCode3, price: t.boardSpecPrice3,
    photos: ["assets/board-top.jpg", "assets/board-edge.jpg", "assets/carbon-fiber.jpg"],
    detail: "assets/board-edge.jpg", kids: true },

  {
    name1: t.board4Name1, name2: t.board4Name2, desc: t.board4Desc,
    specs: [t.board4Spec1, t.board4Spec2, t.board4Spec3],
    code: t.boardSpecCode4, price: t.boardSpecPrice4,
    photos: null, detail: null, comingSoon: true }];


  const [activePhotos, setActivePhotos] = useState({});
  const [activeSize, setActiveSize] = useState({ 0: 1, 1: 1 }); // default: middle size

  const total = boards.length;
  return (
    <>
      <section className="page-hero">
        <div className="page-hero-meta">
          <span><span className="pulse" />Kollektion · 2026</span>
          <span>04 Modelle · Édition limitée</span>
        </div>
        <h1 className="page-hero-headline">
          {t.boardsTitle1} <span className="it">{t.boardsTitle2}</span><br />
          {t.boardsTitle3} <span className="it">{t.boardsTitle4}</span>
        </h1>
      </section>

      {boards.map((b, i) => {
        const photoIdx = activePhotos[i] || 0;
        const photos = b.photos || [];
        const mainPhoto = photos[photoIdx];
        const sizeIdx = activeSize[i] ?? 1;
        const activeSz = b.sizes ? b.sizes[sizeIdx] : null;
        const code = activeSz ? `REF · ${activeSz.code}` : b.code;
        return (
          <section key={i} className={`board-detail ${i % 2 ? "flip" : ""} ${b.comingSoon ? "is-soon" : ""}`}>
            <Reveal className="board-detail-photo">
              {b.comingSoon ?
              <div className="board-soon-card">
                  <div className="board-soon-bg" />
                  <div className="board-soon-text">
                    <span className="board-soon-eyebrow">{b.code}</span>
                    <h3 className="board-soon-headline">{t.comingSoon}</h3>
                    <span className="board-soon-note">{t.comingSoonNote}</span>
                  </div>
                </div> :
              <>
                  <img src={mainPhoto} alt={`${b.name1} ${b.name2}`} key={mainPhoto} className="board-detail-photo-main" />
                  {photos.length > 1 &&
                <div className="board-detail-thumbs">
                      {photos.map((p, pi) =>
                  <button
                    type="button"
                    key={p + pi}
                    className={`board-detail-thumb ${pi === photoIdx ? "on" : ""}`}
                    onClick={() => setActivePhotos({ ...activePhotos, [i]: pi })}
                    aria-label={`Foto ${pi + 1}`}>
                          <img src={p} alt="" />
                        </button>
                  )}
                    </div>
                }
                </>
              }
              <div className="board-detail-photo-frame">
                <span>{code}</span>
                <span>N° 047 / {String(total).padStart(2, "0")} · 2026</span>
              </div>
            </Reveal>
            <Reveal className="board-detail-text" delay={120}>
              <div className="sec-num">0{i + 1} / 0{total} <span>{code}</span></div>
              <h2 className="board-detail-name">
                <span className="non-it">{b.name1}</span><br /><span className="it">{b.name2}</span>
              </h2>
              <p className="board-detail-desc">{b.desc}</p>
              {b.sizes &&
              <div className="board-detail-sizes">
                  <span className="board-detail-sizes-lab">Grössen</span>
                  <div className="board-detail-sizes-pills">
                    {b.sizes.map((sz, si) =>
                  <button
                    type="button"
                    key={sz.code}
                    className={`size-pill ${si === sizeIdx ? "on" : ""}`}
                    onClick={() => setActiveSize({ ...activeSize, [i]: si })}>
                          <span className="size-pill-len">{sz.len}</span>
                          <span className="size-pill-w">{sz.w}</span>
                        </button>
                  )}
                  </div>
                </div>
              }
              <div className="board-detail-specs">
                {b.specs.map(([lab, val], j) => {
                  // override Länge/Gewicht with active size, if present
                  let v = val;
                  if (activeSz && /länge|length/i.test(lab)) v = activeSz.len;
                  if (activeSz && /gewicht|weight/i.test(lab)) v = activeSz.w;
                  return (
                    <div key={j}>
                      <span className="lab">{lab}</span>
                      <span className="val">{v}</span>
                    </div>);

                })}
                <div>
                  <span className="lab">Kern</span>
                  <span className="val">Honeycomb</span>
                </div>
                <div>
                  <span className="lab">Layup</span>
                  <span className="val">2× Carbon</span>
                </div>
                <div>
                  <span className="lab">Auflage</span>
                  <span className="val">12 / Jahr</span>
                </div>
              </div>
              <div className="board-detail-cta">
                <div className="board-detail-price">
                  <span>{b.comingSoon ? "—" : t.boardSpecPrice}</span>
                  <strong>{b.price}</strong>
                </div>
                <a href="#contact" onClick={go("contact")} className="btn btn-primary">{b.comingSoon ? t.comingSoon : t.navCta}</a>
              </div>
            </Reveal>
            {b.detail &&
            <Reveal className="board-detail-strip" delay={200}>
                <img src={b.detail} alt="" />
              </Reveal>
            }
          </section>);

      })}

      <section className="cross-cta">
        <Reveal>
          <p className="cross-cta-eyebrow">— {t.craftEyebrow}</p>
          <h3>
            Ride the wave, <span className="it"> on the Diamond</span>.<br />
            
          </h3>
          <a href="#craft" onClick={go("craft")} className="btn btn-ghost">{t.craftCta}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
          </a>
        </Reveal>
      </section>
    </>);

};

// ============ CRAFT / ATELIER ============
const CraftPage = ({ t, tweaks, go }) =>
<>
    <section className="page-hero">
      <div className="page-hero-meta">
        <span><span className="pulse" />{t.craftEyebrow}</span>
        <span>Atelier Zürich · 47.3769° N</span>
      </div>
      <h1 className="page-hero-headline">
        {t.craftHeadline1} <span className="it">{t.craftHeadline2}</span><br />
        {t.craftHeadline3} <span className="it">{t.craftHeadline4}</span>
      </h1>
    </section>

    <section className="craft-feature">
      <Reveal className="craft-feature-photo">
        <img src="assets/carbon-fiber.jpg" alt="Carbon fiber layup, raw" />
      </Reveal>
      <Reveal className="craft-feature-text" delay={120}>
        <p className="craft-feature-lede">{t.craftLede}</p>
        <div className="craft-stats">
          {[t.craftStat1, t.craftStat2, t.craftStat3].map(([n, l], i) =>
        <div key={i} className="stat">
              <span className="n">{n}</span>
              <span className="l">{l}</span>
            </div>
        )}
        </div>
      </Reveal>
    </section>

    <section className="founders">
      <div className="founders-head">
        <Reveal className="founders-head-left">
          <div className="sec-num">— / Atelier <span>{t.foundersEyebrow}</span></div>
        </Reveal>
        <Reveal>
          <h2 className="sec-title">
            {t.foundersTitle1}<br /><span className="it">{t.foundersTitle2}</span>
          </h2>
        </Reveal>
        <Reveal delay={80}>
          <p className="founders-lede">{t.foundersLede}</p>
        </Reveal>
      </div>
      <div className="founders-grid">
        {t.founders.map((f, i) => {
        const photoMap = { Beni: "assets/founder-beni.jpg", Dorian: "assets/founder-dorian.jpg", Kevin: "assets/founder-kevin.jpg" };
        const photo = photoMap[f.name];
        return (
      <Reveal key={f.name} delay={i * 100} className="founder-card">
            <div className="founder-portrait">
              {photo ?
              <img src={photo} alt={f.name} className={`founder-photo founder-photo--${f.name.toLowerCase()}`} /> :
              <span className="founder-initial">{f.name[0]}</span>}
              <span className="founder-num">0{i + 1}</span>
            </div>
            <div className="founder-body">
              <span className="founder-role">{f.role}</span>
              <h3 className="founder-name">{f.name}</h3>
              <p className="founder-note">{f.note}</p>
            </div>
          </Reveal>);

      })}
      </div>
    </section>

    <section className="process process-full">
      <div className="sec-head">
        <Reveal className="sec-head-left">
          <div className="sec-num">— / Prozess <span>{t.processEyebrow}</span></div>
        </Reveal>
        <Reveal>
          <h2 className="sec-title">
            {t.processTitle1} <span className="it">{t.processTitle2}</span><br />
            {t.processTitle3} <span className="it">{t.processTitle4}</span>
          </h2>
        </Reveal>
      </div>
      <div className="process-list">
        {t.process.map((p, i) =>
      <Reveal key={i} delay={i * 80}>
            <div className="process-row">
              <span className="process-num">{p.num}</span>
              <span className="process-name">{p.name}</span>
              <span className="process-desc">{p.desc}</span>
              <span className="process-tag">{p.tag}</span>
            </div>
          </Reveal>
      )}
      </div>
    </section>

    <section className="craft-gallery">
      <Reveal className="craft-gallery-tall">
        <img src="assets/board-standing.jpg" alt="" />
      </Reveal>
      <div className="craft-gallery-stack">
        <Reveal delay={80}>
          <img src="assets/board-edge.jpg" alt="" />
        </Reveal>
        <Reveal delay={160}>
          <img src="assets/boards-stack.jpg" alt="" />
        </Reveal>
      </div>
    </section>

    <section className="cross-cta">
      <Reveal>
        <p className="cross-cta-eyebrow">— {t.boardsEyebrow}</p>
        <h3>
          Bereit für <span className="it">deins</span>?<br />
          Zwei Modelle. Beide aus dem gleichen Atelier.
        </h3>
        <a href="#boards" onClick={go("boards")} className="btn btn-ghost">{t.heroCta}
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
        </a>
      </Reveal>
    </section>
  </>;


// ============ COMMUNITY ============
const CommunityPage = ({ t, tweaks, go }) => {
  const c = t.community;
  const [filter, setFilter] = useState("all");
  const [showForm, setShowForm] = useState(false);
  const [sent, setSent] = useState(false);
  const [submitted, setSubmitted] = useState([]); // user-added stories (local)
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const [form, setForm] = useState({ name: "", location: "", board: "Diamond Skim", story: "", photo: null, photoUrl: null, photoData: "", consent: false, website: "" });

  const onPhoto = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    const url = URL.createObjectURL(f);
    setForm((s) => ({ ...s, photo: f, photoUrl: url }));
    // Foto fürs Versenden verkleinern (max 1280px, JPEG) — hält die Mail klein
    const img = new Image();
    img.onload = () => {
      const max = 1280;
      let { width, height } = img;
      if (width > max || height > max) {
        if (width > height) { height = Math.round(height * max / width); width = max; }
        else { width = Math.round(width * max / height); height = max; }
      }
      const canvas = document.createElement("canvas");
      canvas.width = width; canvas.height = height;
      canvas.getContext("2d").drawImage(img, 0, 0, width, height);
      const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
      setForm((s) => ({ ...s, photoData: dataUrl }));
    };
    img.src = url;
  };
  const resetForm = () => setForm({ name: "", location: "", board: "Diamond Skim", story: "", photo: null, photoUrl: null, photoData: "", consent: false, website: "" });
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!form.consent) return;
    setError("");
    setSending(true);
    try {
      const res = await fetch("send-story.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name, location: form.location, board: form.board,
          story: form.story, consent: form.consent,
          photoData: form.photoData || "", website: form.website || "",
        }),
      });
      const data = await res.json();
      if (data.success) {
        const today = new Date().toLocaleDateString(undefined, { day: "2-digit", month: "long", year: "numeric" });
        setSubmitted((arr) => [
          { name: form.name || "Anonymous", location: form.location || "—", board: form.board, quote: form.story, photo: form.photoUrl, date: today, isNew: true },
          ...arr]
        );
        setSent(true);
      } else {
        setError(data.error || "Senden fehlgeschlagen. Bitte versuch es nochmal.");
      }
    } catch (err) {
      setError("Verbindungsfehler. Bitte versuch es später nochmal.");
    } finally {
      setSending(false);
    }
  };
  const closeForm = () => {setShowForm(false);setSent(false);resetForm();};

  const all = [...submitted, ...c.stories];
  const filtered = filter === "all" ? all : all.filter((s) => s.board.toLowerCase().includes(filter));

  return (
    <>
      <section className="page-hero community-hero">
        <div className="page-hero-meta">
          <span><span className="pulse" />{c.eyebrow}</span>
          <span>{c.meta}</span>
        </div>
        <h1 className="page-hero-headline">
          {c.headline1} <span className="it">{c.headline2}</span><br />
          {c.headline3} <span className="it">{c.headline4}</span>
        </h1>
        <p className="page-hero-lede">{c.lede}</p>

        <div className="community-stats">
          {c.stats.map(([n, l], i) =>
          <div key={i} className="community-stat">
              <span className="n">{n}</span>
              <span className="l">{l}</span>
            </div>
          )}
        </div>

        <div className="community-actions">
          <button className="btn btn-primary" onClick={() => {setShowForm(true);setSent(false);}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
            {c.shareCta}
          </button>
          <div className="community-filters" role="group" aria-label="Filter by board">
            {[
            { k: "all", label: c.filterAll },
            { k: "skim", label: c.filterSkim },
            { k: "surfer", label: c.filterSurfer },
            { k: "kids", label: c.filterKids }].
            map((f) =>
            <button key={f.k} className={filter === f.k ? "on" : ""} onClick={() => setFilter(f.k)}>
                <span className="dia"><img src="assets/diamond-yellow.svg" alt="" /></span>
                {f.label}
              </button>
            )}
          </div>
        </div>
      </section>

      <section className="community-grid">
        {filtered.length === 0 ?
        <div className="community-empty">{c.empty}</div> :

        filtered.map((s, i) =>
        <Reveal key={i} delay={i % 4 * 70}>
              <article className={`story-card${s.isNew ? " is-new" : ""}`}>
                <div className="story-photo">
                  {s.photo ? <img src={s.photo} alt="" /> : <div className="story-photo-placeholder">— Photo —</div>}
                  <span className="story-board">{s.board}</span>
                </div>
                <blockquote className="story-quote">"{s.quote}"</blockquote>
                <footer className="story-meta">
                  <div className="story-author">
                    <span className="story-name">{s.name}</span>
                    <span className="story-loc">{s.location}</span>
                  </div>
                  <span className="story-date">{s.date}</span>
                </footer>
              </article>
            </Reveal>
        )
        }
      </section>

      {showForm &&
      <div className="community-modal" role="dialog" aria-modal="true" onClick={closeForm}>
          <div className="community-modal-inner" onClick={(e) => e.stopPropagation()}>
            <button className="community-modal-close" onClick={closeForm} aria-label="Close">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18" /><line x1="6" y1="18" x2="18" y2="6" /></svg>
            </button>

            {sent ?
          <div className="contact-sent community-sent">
                <div className="contact-sent-diamond"><img src="assets/diamond-yellow.svg" alt="" /></div>
                <h3>{c.thanksTitle} <span className="it">{c.thanksTitle2}</span></h3>
                <p>{c.thanksBody}</p>
                <div className="community-sent-actions">
                  <button className="btn btn-ghost" onClick={() => {setSent(false);resetForm();}}>{c.thanksAgain}</button>
                  <button className="btn btn-primary" onClick={closeForm}>OK</button>
                </div>
              </div> :

          <>
                <header className="community-form-head">
                  <span className="lab">— {c.eyebrow}</span>
                  <h3>{c.formTitle1} <span className="it">{c.formTitle2}</span></h3>
                  <p>{c.formIntro}</p>
                </header>
                <form className="contact-form community-form" onSubmit={onSubmit}>
                  {/* Honeypot gegen Spam-Bots — für Menschen unsichtbar */}
                  <input
                    type="text"
                    name="website"
                    value={form.website}
                    onChange={(e) => setForm({ ...form, website: e.target.value })}
                    tabIndex={-1}
                    autoComplete="off"
                    style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }}
                    aria-hidden="true"
                  />
                  <div className="contact-form-row">
                    <label>
                      <span className="lab">01 — {c.fName}</span>
                      <input type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Lara M." />
                    </label>
                    <label>
                      <span className="lab">02 — {c.fLocation}</span>
                      <input type="text" required value={form.location} onChange={(e) => setForm({ ...form, location: e.target.value })} placeholder="Walensee, CH" />
                    </label>
                  </div>
                  <label>
                    <span className="lab">03 — {c.fBoard}</span>
                    <div className="contact-radio">
                      {["Diamond Skim", "Diamond Surfer", "Diamond Kids", "Custom"].map((o) =>
                  <button type="button" key={o} className={form.board === o ? "on" : ""} onClick={() => setForm({ ...form, board: o })}>
                          <span className="dia"><img src="assets/diamond-yellow.svg" alt="" /></span>
                          {o}
                        </button>
                  )}
                    </div>
                  </label>
                  <label>
                    <span className="lab">04 — {c.fStory}</span>
                    <textarea rows={4} required value={form.story} onChange={(e) => setForm({ ...form, story: e.target.value })} placeholder="Erzähl uns kurz von deinem Moment auf dem Wasser…" />
                  </label>
                  <label className="community-photo">
                    <span className="lab">05 — {c.fPhoto}</span>
                    <div className={`community-photo-drop${form.photoUrl ? " has-photo" : ""}`}>
                      {form.photoUrl ?
                  <>
                          <img src={form.photoUrl} alt="" />
                          <button type="button" className="community-photo-remove" onClick={(e) => {e.preventDefault();setForm((s) => ({ ...s, photo: null, photoUrl: null }));}}>
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18" /><line x1="6" y1="18" x2="18" y2="6" /></svg>
                          </button>
                        </> :

                  <div className="community-photo-empty">
                          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>
                          <span>{c.fPhoto}</span>
                          <small>{c.fPhotoHint}</small>
                        </div>
                  }
                      <input type="file" accept="image/png,image/jpeg" onChange={onPhoto} />
                    </div>
                  </label>
                  <label className="community-consent">
                    <input type="checkbox" checked={form.consent} onChange={(e) => setForm({ ...form, consent: e.target.checked })} />
                    <span>{c.fConsent}</span>
                  </label>
                  <div className="community-form-actions">
                    <button type="button" className="btn btn-ghost" onClick={closeForm}>{c.fCancel}</button>
                    <button type="submit" className="btn btn-primary" disabled={!form.consent || sending}>
                      {sending ? "Wird gesendet…" : c.fSubmit}
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
                    </button>
                  </div>
                  {error && <p style={{ color: "#ff6b6b", marginTop: "12px", fontSize: "0.9rem" }}>{error}</p>}
                </form>
              </>
          }
          </div>
        </div>
      }
    </>);

};

// ============ CONTACT ============
const ContactPage = ({ t, tweaks, go }) => {
  const [form, setForm] = useState({ name: "", email: "", board: "", msg: "", website: "" });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const onSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setSending(true);
    try {
      const res = await fetch("send.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (data.success) {
        setSent(true);
      } else {
        setError(data.error || "Senden fehlgeschlagen. Bitte versuch es nochmal.");
      }
    } catch (err) {
      setError("Verbindungsfehler. Bitte versuch es später nochmal oder schreib direkt an info@wakediamond.ch.");
    } finally {
      setSending(false);
    }
  };
  return (
    <>
      <section className="page-hero">
        <div className="page-hero-meta">
          <span><span className="pulse" />Kontakt · Live</span>
          <span>info@wakediamond.ch</span>
        </div>
        <h1 className="page-hero-headline">
          {t.contactH1} <span className="it">{t.contactH2}</span>
        </h1>
        <p className="page-hero-lede">{t.contactP}</p>
      </section>

      <section className="contact-page">
        <Reveal className="contact-form-wrap">
          {sent ?
          <div className="contact-sent">
              <div className="contact-sent-diamond"><img src="assets/diamond-yellow.svg" alt="" /></div>
              <h3>Danke. <span className="it">Wir melden uns.</span></h3>
              <p>Innerhalb von 48 Stunden — meist schneller, falls grad keine Welle ruft.</p>
            </div> :

          <form className="contact-form" onSubmit={onSubmit}>
              {/* Honeypot gegen Spam-Bots — für Menschen unsichtbar */}
              <input
                type="text"
                name="website"
                value={form.website}
                onChange={(e) => setForm({ ...form, website: e.target.value })}
                tabIndex={-1}
                autoComplete="off"
                style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }}
                aria-hidden="true"
              />
              <div className="contact-form-row">
                <label>
                  <span className="lab">01 — Name</span>
                  <input type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Lara Müller" />
                </label>
                <label>
                  <span className="lab">02 — Email</span>
                  <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="lara@beispiel.ch" />
                </label>
              </div>
              <label>
                <span className="lab">03 — {t.nav.boards}</span>
                <div className="contact-radio">
                  {["Diamond Skim", "Diamond Surfer", "Custom", "Beratung"].map((o) =>
                <button type="button" key={o} className={form.board === o ? "on" : ""} onClick={() => setForm({ ...form, board: o })}>
                      <span className="dia"><img src="assets/diamond-yellow.svg" alt="" /></span>
                      {o}
                    </button>
                )}
                </div>
              </label>
              <label>
                <span className="lab">04 — Nachricht</span>
                <textarea rows={4} value={form.msg} onChange={(e) => setForm({ ...form, msg: e.target.value })} placeholder="Erzähl uns kurz, was du suchst — wir melden uns." />
              </label>
              <button type="submit" className="btn btn-primary contact-submit" disabled={sending}>
                {sending ? "Wird gesendet…" : t.contactCta1}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
              </button>
              {error && <p style={{ color: "#ff6b6b", marginTop: "12px", fontSize: "0.9rem" }}>{error}</p>}
            </form>
          }
        </Reveal>

        <Reveal className="contact-info" delay={120}>
          <div className="contact-info-block">
            <span className="lab">Atelier</span>
            <p>WAKEDIAMOND GmbH<br />Fürschtweg 46<br />8880 Walenstadt<br />Schweiz</p>
          </div>
          <div className="contact-info-block">
            <span className="lab">Direkt</span>
            <p>
              <a href="mailto:info@wakediamond.ch">info@wakediamond.ch</a>
            </p>
          </div>
          <div className="contact-info-block">
            <span className="lab">Werkstatt-Besuch</span>
            <p>Auf Anfrage</p>
          </div>
          <div className="contact-info-block">
            <span className="lab">Folgen</span>
            <p>
              <a href="#">Instagram</a><br />
              <a href="#">Vimeo</a><br />
              <a href="#">Newsletter</a>
            </p>
          </div>
        </Reveal>
      </section>
    </>);

};

// ============ FOOTER ============
const Footer = ({ t, go }) =>
<footer className="footer">
    <div className="footer-grid">
      <div className="footer-brand">
        <img src="assets/logo-wakediamond.svg" alt="WAKEDIAMOND Surfboards" className="footer-logo" />
        <span className="word-mark"><em>Swiss</em> · Hand · Made</span>
        <p>{t.footerTag}</p>
      </div>
      <div className="footer-col">
        <h4>{t.footerCol1}</h4>
        <ul>
          {["home", "boards", "craft", "contact"].map((p, i) =>
        <li key={p}><a href={`#${p}`} onClick={go(p)}>{t.footerLinks1[i]}</a></li>
        )}
        </ul>
      </div>
      <div className="footer-col">
        <h4>{t.footerCol2}</h4>
        <ul>{t.footerLinks2.map((l, i) => <li key={i}><a href="#contact" onClick={go("contact")}>{l}</a></li>)}</ul>
      </div>
      <div className="footer-col">
        <h4>{t.footerCol3}</h4>
        <ul>{t.footerLinks3.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
      </div>
    </div>
    <div className="footer-bottom">
      <span>{t.footerCopy}</span>
      <span>{t.footerLegal}</span>
    </div>
  </footer>;


Object.assign(window, { HomePage, BoardsPage, CraftPage, CommunityPage, ContactPage, Footer });