// Inboxli — section components (bilingual: copy comes from i18n.js)

const { useState: useStateS } = React;

// ============ LANGUAGE SWITCH ============
function FlagEN() {
  return (
    <svg viewBox="0 0 20 14" className="flag" aria-hidden="true">
      <rect width="20" height="14" fill="#012169" />
      <path d="M0 0 L20 14 M20 0 L0 14" stroke="#fff" strokeWidth="2.8" />
      <path d="M0 0 L20 14 M20 0 L0 14" stroke="#C8102E" strokeWidth="1.4" />
      <path d="M10 0 V14 M0 7 H20" stroke="#fff" strokeWidth="4.6" />
      <path d="M10 0 V14 M0 7 H20" stroke="#C8102E" strokeWidth="2.6" />
    </svg>);
}

function FlagSR() {
  return (
    <svg viewBox="0 0 20 14" className="flag" aria-hidden="true">
      <rect width="20" height="4.67" fill="#C6363C" />
      <rect y="4.67" width="20" height="4.66" fill="#0C4076" />
      <rect y="9.33" width="20" height="4.67" fill="#F4F2EC" />
    </svg>);
}

function LangSwitch({ compact }) {
  const lang = useLang();
  const copy = INBOXLI_COPY[lang];
  return (
    <div className={`lang-switch ${compact ? "is-compact" : ""}`} role="group" aria-label={copy.nav.langLabel}>
      <button
        type="button"
        className={`lang-btn ${lang === "en" ? "is-on" : ""}`}
        aria-pressed={lang === "en"}
        onClick={() => setLang("en")}>
        <FlagEN /><span>EN</span>
      </button>
      <button
        type="button"
        className={`lang-btn ${lang === "sr" ? "is-on" : ""}`}
        aria-pressed={lang === "sr"}
        onClick={() => setLang("sr")}>
        <FlagSR /><span>SR</span>
      </button>
    </div>);
}

// ============ NAV ============
function Nav() {
  const [open, setOpen] = useStateS(false);
  const c = useCopy().nav;

  return (
    <nav className={`nav ${open ? "is-open" : ""}`}>
      <div className="nav-inner">
        <a href="#" className="brand">
          <div className="brand-mark">i</div>
          <span>Inboxli</span>
        </a>
        <div className="nav-links">
          {c.links.map(([h, l]) => <a key={h} href={h} onClick={() => setOpen(false)}>{l}</a>)}
        </div>
        <div className="nav-right">
          <LangSwitch />
          <button type="button" className="btn btn-sm nav-cta" data-open-form onClick={() => setOpen(false)}>{c.cta}</button>
          <button
            className="nav-burger"
            aria-label={open ? c.menuClose : c.menuOpen}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}>
            <span /><span /><span />
          </button>
        </div>
      </div>
      <div className="nav-drawer" role="menu">
        {c.links.map(([h, l]) =>
        <a key={h} href={h} onClick={() => setOpen(false)}>{l}</a>
        )}
        <button type="button" className="btn" data-open-form onClick={() => setOpen(false)}>{c.cta}</button>
      </div>
    </nav>);
}

// ============ HERO ============
function Hero({ headline, sub, primaryCta, secondaryCta }) {
  const c = useCopy().hero;
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="kicker">{c.kicker}</div>
            <h1>
              {headline.before}
              {headline.marker && <><span className="mark">{headline.marker}</span>{" "}</>}
              {headline.italic && <><span className="italic">{headline.italic}</span>{" "}</>}
              {headline.after}
            </h1>
            <p className="lead">{sub}</p>
            <div className="hero-cta">
              <button type="button" className="btn btn-ink" data-open-form>{primaryCta} <span style={{ fontFamily: "var(--serif)", fontStyle: "italic" }}>→</span></button>
              <a href="#rezultati" className="btn btn-ghost">{secondaryCta}</a>
              <span className="meta"><span className="meta-arrow"></span>{c.meta}</span>
            </div>
          </div>
          <HeroCollage />
        </div>
      </div>
    </section>);

}

function HeroCollage() {
  const c = useCopy().hero.collage;
  return (
    <div className="hero-collage" aria-hidden="true">
      {/* inbox sticker */}
      <div className="sticker" style={{ left: "4%", top: "8%", width: 248, transform: "rotate(-4deg)" }}>
        <div style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: ".06em", textTransform: "uppercase" }}>{c.inboxLabel}</div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.2, margin: "6px 0 4px" }}>
          {c.inboxTitleA}<span className="mark">{c.inboxTitleMark}</span> ★
        </div>
        <div style={{ fontSize: 12.5, color: "var(--ink-soft)", lineHeight: 1.45 }}>
          {c.inboxBody}
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
          <span style={{ fontSize: 10, padding: "3px 8px", border: "1px solid var(--ink)", borderRadius: 999, background: "var(--marker)" }}>VIP</span>
          <span style={{ fontSize: 10, padding: "3px 8px", border: "1px solid var(--line)", borderRadius: 999, color: "var(--ink-mute)" }}>open 64%</span>
        </div>
      </div>

      {/* loyalty card */}
      <div className="sticker" style={{ right: "2%", top: "2%", width: 200, transform: "rotate(5deg)", background: "var(--accent)", color: "#fff", borderColor: "var(--ink)" }}>
        <div style={{ fontSize: 10.5, letterSpacing: ".12em", textTransform: "uppercase", opacity: .85 }}>{c.loyaltyLabel}</div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 30, lineHeight: 1, marginTop: 8 }}>
          240<span style={{ fontStyle: "italic", marginLeft: 4 }}>✦</span>
        </div>
        <div style={{ fontSize: 11.5, opacity: .9, marginTop: 6 }}>{c.nextTier}</div>
        <div style={{ height: 6, background: "rgba(255,255,255,.3)", borderRadius: 6, marginTop: 10, overflow: "hidden" }}>
          <div style={{ height: "100%", width: "78%", background: "#fff", borderRadius: 6 }} />
        </div>
      </div>

      {/* metric sticker */}
      <div className="sticker" style={{ left: "22%", bottom: "8%", width: 220, transform: "rotate(-2deg)" }}>
        <div style={{ fontSize: 10.5, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink-mute)" }}>{c.repeatLabel}</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 4 }}>
          <div style={{ fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1 }}>+38%</div>
          <span className="hand" style={{ fontSize: 18, color: "var(--accent-deep)" }}>{c.repeatNote}</span>
        </div>
        {/* mini chart */}
        <svg viewBox="0 0 200 50" style={{ width: "100%", height: 40, marginTop: 8 }}>
          <path d="M 4 38 L 30 32 L 56 36 L 84 22 L 112 26 L 140 12 L 168 16 L 196 4"
          fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M 4 38 L 30 32 L 56 36 L 84 22 L 112 26 L 140 12 L 168 16 L 196 4 L 196 50 L 4 50 z"
          fill="var(--accent)" opacity=".12" />
        </svg>
      </div>

      {/* hand-drawn arrow + note */}
      <svg style={{ position: "absolute", right: "8%", bottom: "18%", width: 110, height: 80, transform: "rotate(8deg)" }} viewBox="0 0 110 80">
        <path d="M 12 8 Q 60 8 70 56 M 60 48 L 70 56 L 78 44" fill="none" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <div className="hand" style={{ position: "absolute", right: 0, bottom: -30, fontSize: 22, color: "var(--accent-deep)", whiteSpace: "nowrap", textAlign: "right", transform: "rotate(-2deg)" }}>
        {c.note}
      </div>
    </div>);

}

// ============ STATS ============
function Stats() {
  const s = useCopy().stats;
  return (
    <section className="stats">
      <div className="wrap">
        <div className="stats-row">
          <div className="stat">
            <div className="stat-num">{s[0].num}</div>
            <div className="stat-lbl">{s[0].lbl}</div>
          </div>
          <div className="stat">
            <div className="stat-num">+<span className="italic">38%</span></div>
            <div className="stat-lbl">{s[1].lbl}</div>
          </div>
          <div className="stat">
            <div className="stat-num">{s[2].num}</div>
            <div className="stat-lbl">{s[2].lbl}</div>
          </div>
          <div className="stat">
            <div className="stat-num">4.9<span style={{ color: "var(--accent)" }}>★</span></div>
            <div className="stat-lbl">{s[3].lbl}</div>
          </div>
        </div>
      </div>
    </section>);

}

function LogoWall() {
  const c = useCopy().logowall;
  const all = ["Crux Pure", "CreGAAtine", "ZzzuperSleep", "KeyMolecule", "Kamatica.rs", "NajboljaMamaNaSvetu"];
  const mobileA = ["Crux Pure", "CreGAAtine", "Kamatica.rs"];
  const mobileB = ["ZzzuperSleep", "KeyMolecule", "NajboljaMamaNaSvetu"];

  return (
    <div className="wrap brand-carousel-wrap" aria-label={c.aria}>
      {/* Desktop: single row with all 6 */}
      <div className="brand-marquee brand-show-desktop">
        <ul className="brand-track brand-track-left">
          {[...all, ...all].map((name, i) =>
          <li key={"d-" + i} className="brand-pill">{name}</li>
          )}
        </ul>
      </div>

      {/* Mobile: two rows, different brands, opposite directions */}
      <div className="brand-marquee brand-show-mobile">
        <ul className="brand-track brand-track-left">
          {[...mobileA, ...mobileA, ...mobileA, ...mobileA].map((name, i) =>
          <li key={"a-" + i} className="brand-pill">{name}</li>
          )}
        </ul>
      </div>
      <div className="brand-marquee brand-show-mobile">
        <ul className="brand-track brand-track-right">
          {[...mobileB, ...mobileB, ...mobileB, ...mobileB].map((name, i) =>
          <li key={"b-" + i} className="brand-pill brand-pill-alt">{name}</li>
          )}
        </ul>
      </div>
    </div>);

}

// ============ LOSS / ROI CALCULATOR ============
function LossSection() {
  const lang = useLang();
  const c = INBOXLI_COPY[lang].loss;
  const [monthlyRev, setMonthlyRev] = useStateS(40000); // EUR
  const [aov, setAov] = useStateS(45); // EUR
  const [repeatRate, setRepeatRate] = useStateS(15); // %

  const TARGET = 38;

  const monthlyOrders = aov > 0 ? monthlyRev / aov : 0;
  const gap = Math.max(0, (TARGET - repeatRate) / 100);
  const annualLost = Math.round(monthlyOrders * gap * aov * 12);
  const monthlyLost = Math.round(annualLost / 12);
  const newCAC = Math.round(monthlyOrders * gap * 15 * 12);

  const fmt = (n) =>
  lang === "sr" ?
  "€" + Math.round(n).toLocaleString("sr-RS").replace(/,/g, ".") :
  "€" + Math.round(n).toLocaleString("en-US");

  return (
    <section id="problem" className="loss">
      <div className="wrap">
        <div className="loss-grid">
          <div className="loss-copy">
            <div className="kicker">{c.kicker}</div>
            <h2>
              {c.h2a}<span className="italic" style={{ color: "var(--accent-deep)" }}>{c.h2i}</span>{c.h2b}
            </h2>
            <p className="lead">{c.lead}</p>

            <div className="loss-stat">
              <div className="ls-big">
                {c.bigA}<span className="accent">{c.bigAccent}</span>{c.bigB}
              </div>
              <div className="ls-sub">
                {c.subA}<em>{c.subEm}</em>{c.subB}
              </div>
            </div>

            <div style={{ marginTop: 28, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <button type="button" className="btn btn-ink" data-open-form>{c.cta}</button>
              <span className="hand" style={{ fontSize: 19, color: "var(--accent-deep)" }}>
                {c.handNote}
              </span>
            </div>
          </div>

          {/* ===== ROI Calculator ===== */}
          <div className="calc" aria-label={c.calc.aria}>
            <span className="calc-tag">{c.calc.tag}</span>
            <h3>{c.calc.h3}</h3>
            <p className="calc-sub">{c.calc.sub}</p>

            <div className="calc-field">
              <label>
                <span>{c.calc.f1}</span>
                <span className="val">{fmt(monthlyRev)}</span>
              </label>
              <input
                type="range"
                min="5000"
                max="200000"
                step="1000"
                value={monthlyRev}
                onChange={(e) => setMonthlyRev(+e.target.value)} />
            </div>

            <div className="calc-field">
              <label>
                <span>{c.calc.f2}</span>
                <span className="val">{fmt(aov)}</span>
              </label>
              <input
                type="range"
                min="15"
                max="200"
                step="1"
                value={aov}
                onChange={(e) => setAov(+e.target.value)} />
            </div>

            <div className="calc-field">
              <label>
                <span>{c.calc.f3}</span>
                <span className="val">{repeatRate}%</span>
              </label>
              <input
                type="range"
                min="0"
                max="35"
                step="1"
                value={repeatRate}
                onChange={(e) => setRepeatRate(+e.target.value)} />
            </div>

            <div className="calc-out">
              <div className="co-lbl">{c.calc.outLbl}</div>
              <div className="co-big">
                <span className="ink">−</span>{fmt(annualLost)}
              </div>
              <div className="co-row">
                <div className="co-cell">
                  <div className="co-sub">{c.calc.monthly}</div>
                  <div className="co-num">{fmt(monthlyLost)}</div>
                </div>
                <div className="co-cell">
                  <div className="co-sub">{c.calc.saved}</div>
                  <div className="co-num">{fmt(newCAC)}{c.calc.perYear}</div>
                </div>
              </div>
            </div>

            <div className="calc-foot">
              <span>{c.calc.footA}{TARGET}{c.calc.footB}</span>
              <span className="hand-note">{c.calc.handNote}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ BEFORE / AFTER ============
function BeforeAfter() {
  const c = useCopy().bafter;

  return (
    <section className="bafter">
      <div className="wrap">
        <div className="sec-head">
          <div className="kicker">{c.kicker}</div>
          <h2>{c.h2a}<span className="italic" style={{ color: "var(--accent-deep)" }}>{c.h2i}</span>{c.h2b}</h2>
          <p>{c.lead}</p>
        </div>

        <div className="bafter-grid">
          <div className="ba-col before">
            <div className="ba-eyebrow">{c.beforeEyebrow}</div>
            <h3>{c.beforeH3}</h3>
            <ul className="ba-list">
              {c.before.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
            <div className="ba-bottom">
              <span>{c.bottomLbl}</span>
              <strong>{c.beforeResult}</strong>
            </div>
          </div>

          <div className="ba-divider" aria-hidden="true">
            <div className="ba-arrow">→</div>
          </div>

          <div className="ba-col after">
            <div className="ba-eyebrow">{c.afterEyebrow}</div>
            <h3>{c.afterH3}</h3>
            <ul className="ba-list">
              {c.after.map((a, i) => <li key={i}>{a}</li>)}
            </ul>
            <div className="ba-bottom">
              <span>{c.bottomLbl}</span>
              <strong>{c.afterResult}</strong>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ SERVICES ============
function Services() {
  const c = useCopy().services;

  return (
    <section id="usluge" className="services">
      <div className="wrap">
        <div className="sec-head">
          <div className="kicker">{c.kicker}</div>
          <h2>{c.h2a}<span className="italic" style={{ color: "var(--accent-deep)" }}>{c.h2i}</span></h2>
          <p>{c.lead}</p>
        </div>
        <div className="services-grid">
          {c.items.map((it) =>
          <div key={it.n} className="svc-card">
              <div className="num">{it.n} /</div>
              <h3>{it.title}</h3>
              <p>{it.copy}</p>
              <ul className="svc-list">
                {it.bullets.map((b) => <li key={b}>{b}</li>)}
              </ul>
            </div>
          )}
        </div>

        <div className="sec-cta">
          <button type="button" className="btn btn-ink" data-open-form>{c.cta}</button>
          <span className="hand sec-cta-note">
            <span className="sec-cta-arrow"></span>
            {c.ctaNote}
          </span>
        </div>
      </div>
    </section>);

}

// ============ CASES ============
function CaseVisual({ kind, v }) {
  if (kind === "welcome") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" aria-hidden="true">
        <g transform="translate(82 38) rotate(-8)">
          <rect width="160" height="100" rx="6" fill="#FFF8EE" stroke="#1F1B16" strokeWidth="2" />
          <path d="M 2 6 L 80 64 L 158 6" fill="none" stroke="#1F1B16" strokeWidth="2" />
        </g>
        <g transform="translate(96 52) rotate(2)">
          <rect width="160" height="100" rx="6" fill="#FFFFFF" stroke="#1F1B16" strokeWidth="2" />
          <path d="M 2 6 L 80 64 L 158 6" fill="none" stroke="#1F1B16" strokeWidth="2" />
          <rect x="14" y="20" width="80" height="6" rx="3" fill="#E8744D" opacity=".75" />
          <rect x="14" y="32" width="120" height="4" rx="2" fill="#1F1B16" opacity=".18" />
          <rect x="14" y="40" width="100" height="4" rx="2" fill="#1F1B16" opacity=".18" />
        </g>
        <g transform="translate(70 76) rotate(-3)">
          <rect width="170" height="84" rx="6" fill="#BFE57A" stroke="#1F1B16" strokeWidth="2.2" />
          <path d="M 0 0 L 85 50 L 170 0" fill="#A6CC65" stroke="#1F1B16" strokeWidth="2.2" strokeLinejoin="round" />
          <text x="85" y="62" textAnchor="middle" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#1F1B16">{v.welcome}</text>
        </g>
        <path d="M 268 30 Q 296 50 280 92 M 274 84 L 280 92 L 288 86"
        fill="none" stroke="#C95C36" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <text x="278" y="22" textAnchor="middle" fontFamily="Caveat, cursive" fontSize="17" fill="#C95C36" transform="rotate(8 278 22)">{v.welcomeNote}</text>
      </svg>);

  }
  if (kind === "vip") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" aria-hidden="true">
        <g transform="translate(36 26) rotate(-7)">
          <rect width="200" height="58" rx="10" fill="#FFFFFF" stroke="#1F1B16" strokeWidth="2" />
          <text x="14" y="22" fontFamily="DM Sans, sans-serif" fontSize="9" letterSpacing="2" fill="#1F1B16" opacity=".55">TIER · 01</text>
          <text x="14" y="44" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#1F1B16">{v.vipTier1}</text>
          <circle cx="178" cy="29" r="13" fill="none" stroke="#1F1B16" strokeWidth="1.6" />
          <text x="178" y="33" textAnchor="middle" fontSize="11" fill="#1F1B16">★</text>
        </g>
        <g transform="translate(60 60) rotate(2)">
          <rect width="200" height="58" rx="10" fill="#F4D785" stroke="#1F1B16" strokeWidth="2" />
          <text x="14" y="22" fontFamily="DM Sans, sans-serif" fontSize="9" letterSpacing="2" fill="#1F1B16" opacity=".7">TIER · 02</text>
          <text x="14" y="44" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#1F1B16">{v.vipTier2}</text>
          <circle cx="178" cy="29" r="13" fill="#1F1B16" />
          <text x="178" y="33" textAnchor="middle" fontSize="11" fill="#F4D785">★★</text>
        </g>
        <g transform="translate(86 100) rotate(-2)">
          <rect width="200" height="58" rx="10" fill="#1F1B16" stroke="#1F1B16" strokeWidth="2" />
          <text x="14" y="22" fontFamily="DM Sans, sans-serif" fontSize="9" letterSpacing="2" fill="#BFE57A">TIER · 03</text>
          <text x="14" y="46" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="24" fill="#FFFFFF">{v.vipTier3}</text>
          <circle cx="178" cy="29" r="13" fill="#BFE57A" />
          <text x="178" y="33" textAnchor="middle" fontSize="10" fill="#1F1B16">★★★</text>
        </g>
        <text x="22" y="155" fontFamily="Caveat, cursive" fontSize="16" fill="#C95C36" transform="rotate(-4 22 155)">{v.vipNote}</text>
      </svg>);

  }
  return (
    <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" aria-hidden="true">
      <g transform="translate(86 56)">
        <rect x="0" y="20" width="148" height="92" rx="4" fill="#E8C9A6" stroke="#1F1B16" strokeWidth="2" />
        <path d="M 0 20 L 74 0 L 148 20 L 74 40 Z" fill="#D9B58C" stroke="#1F1B16" strokeWidth="2" strokeLinejoin="round" />
        <line x1="74" y1="40" x2="74" y2="112" stroke="#1F1B16" strokeWidth="2" strokeDasharray="3 3" opacity=".55" />
        <rect x="58" y="36" width="32" height="76" fill="#FFFFFF" stroke="#1F1B16" strokeWidth="1.6" opacity=".9" />
        <circle cx="74" cy="58" r="14" fill="#E8744D" stroke="#1F1B16" strokeWidth="2" />
        <text x="74" y="63" textAnchor="middle" fontSize="14" fill="#FFFFFF">♡</text>
        <rect x="14" y="78" width="38" height="22" fill="#FFFFFF" stroke="#1F1B16" strokeWidth="1.4" />
        <line x1="18" y1="84" x2="48" y2="84" stroke="#1F1B16" strokeWidth="1" opacity=".7" />
        <line x1="18" y1="89" x2="42" y2="89" stroke="#1F1B16" strokeWidth="1" opacity=".5" />
        <line x1="18" y1="94" x2="46" y2="94" stroke="#1F1B16" strokeWidth="1" opacity=".5" />
      </g>
      <g fill="#C95C36">
        <text x="44" y="40" fontSize="20" transform="rotate(-12 44 40)">★</text>
        <text x="266" y="36" fontSize="16" transform="rotate(10 266 36)">★</text>
        <text x="282" y="78" fontSize="22" transform="rotate(-6 282 78)">★</text>
      </g>
      <text x="22" y="160" fontFamily="Caveat, cursive" fontSize="17" fill="#1F1B16" transform="rotate(-3 22 160)">{v.packageNote}</text>
    </svg>);

}

function Cases() {
  const c = useCopy().cases;
  const imgs = ["peach", "sage", "lilac"];
  const visuals = ["welcome", "vip", "package"];

  return (
    <section id="rezultati" className="cases">
      <div className="wrap">
        <div className="sec-head">
          <div className="kicker">{c.kicker}</div>
          <h2>{c.h2a}<span className="mark mark-amber">{c.h2mark}</span>{c.h2b}</h2>
          <p>{c.lead}</p>
        </div>
        <div className="cases-grid">
          {c.items.map((it, i) =>
          <div key={i} className="case">
              <div className="case-badge">{it.badge}</div>
              <div className={`case-img ${imgs[i]}`}>
                <CaseVisual kind={visuals[i]} v={c.visual} />
              </div>
              <div className="case-body">
                <div className="case-brand">{it.brand}</div>
                <h4>{it.title}</h4>
                <div className="case-metrics">
                  {it.metrics.map((m, j) =>
                <div key={j} className="case-metric">
                      <div className="m">{m.m}</div>
                      <div className="l">{m.l}</div>
                    </div>
                )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ PROCESS ============
function Process() {
  const c = useCopy().process;

  return (
    <section id="proces" className="process">
      <div className="wrap">
        <div className="sec-head">
          <div className="kicker">{c.kicker}</div>
          <h2>{c.h2a}<span className="italic" style={{ color: "var(--accent-deep)", fontFamily: "var(--serif)" }}>{c.h2i}</span></h2>
          <p>{c.lead}</p>
        </div>
        <div className="steps">
          {c.steps.map((s) => <div key={s.n} className="step">
              <div className="step-n">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          )}
        </div>

        <div className="sec-cta">
          <button type="button" className="btn btn-ink" data-open-form>{c.cta}</button>
          <span className="hand sec-cta-note">
            <span className="sec-cta-arrow"></span>
            {c.ctaNote}
          </span>
        </div>
      </div>
    </section>);

}

// ============ TESTIMONIALS ============
function Testimonials() {
  const c = useCopy().testimonials;
  const colors = ["#F4C7B5", "#C9DDB8", "#D8C8E2", "#FFE6A8", "#B8D6E8", "#F4B4A2"];

  return (
    <section className="testimonials">
      <div className="wrap">
        <div className="sec-head">
          <div className="kicker">{c.kicker}</div>
          <h2>{c.h2}</h2>
          <p>{c.lead}</p>
        </div>
        <div className="tm-grid">
          {c.items.map((t, i) =>
          <div key={i} className="tm">
              <div className="tm-stars">★★★★★</div>
              <p className="tm-quote">“{t.q}”</p>
              <div className="tm-author">
                <div className="tm-av" style={{ background: colors[i] }}>{t.n[0]}</div>
                <div>
                  <div className="tm-name">{t.n}</div>
                  <div className="tm-role">{t.r}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ FAQ ============
function FAQ() {
  const [open, setOpen] = useStateS(0);
  const c = useCopy().faq;

  return (
    <section id="faq" className="faq">
      <div className="wrap-narrow">
        <div className="sec-head">
          <div className="kicker">{c.kicker}</div>
          <h2>{c.h2a}<span className="hand" style={{ color: "var(--accent-deep)" }}>{c.h2hand}</span>{c.h2b}</h2>
        </div>
        <div className="faq-list">
          {c.items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-toggle">+</span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ FINAL CTA ============
function FinalCTA() {
  const c = useCopy().finalCta;
  return (
    <section id="cta" className="cta-final">
      <span className="cta-orbit cta-orbit-l">{c.orbitA}</span>
      <span className="cta-orbit cta-orbit-r">{c.orbitB}</span>
      <div className="wrap-narrow">
        <div className="kicker" style={{ justifyContent: "center", display: "inline-flex" }}>{c.kicker}</div>
        <h2>
          {c.h2a}<span className="mark">{c.h2mark}</span>{c.h2b}<br />
          {c.h2c}<span className="italic" style={{ color: "var(--accent-deep)" }}>{c.h2i}</span>
        </h2>
        <p>{c.lead}</p>
        <button type="button" className="btn btn-ink" data-open-form style={{ fontSize: 16, padding: "16px 26px" }}>
          {c.cta}
        </button>
      </div>
    </section>);

}

// ============ FOOTER ============
function Footer() {
  const c = useCopy().footer;
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="foot-brand">Inbox<span className="italic">li</span>.</div>
            <p className="foot-mini">{c.mini}</p>
            <div style={{ marginTop: 18, display: "flex", gap: 10 }}>
              <span style={{ fontSize: 12, padding: "5px 10px", border: "1px solid rgba(255,255,255,.25)", borderRadius: 999 }}>{c.pill}</span>
            </div>
          </div>
          <div>
            <h5>{c.servicesH}</h5>
            <ul>
              {c.services.map((s) => <li key={s}>{s}</li>)}
            </ul>
          </div>
          <div>
            <h5>{c.resourcesH}</h5>
            <ul>
              {c.resources.map((s) => <li key={s}>{s}</li>)}
            </ul>
          </div>
          <div>
            <h5>{c.contactH}</h5>
            <ul>
              <li>{c.supportLabel} <a className="foot-link" href="mailto:mile@inboxli.com">mile@inboxli.com</a></li>
              <li>{c.company}</li>
              <li style={{ whiteSpace: "pre-line" }}>{c.address}</li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>{c.rights}</span>
          <span className="foot-legal">
            <a className="foot-link" href="privacy.html">{c.privacy}</a>
            <a className="foot-link" href="terms.html">{c.terms}</a>
          </span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  LangSwitch, Nav, Hero, Stats, LogoWall, LossSection, BeforeAfter, Services, Cases, Process, Testimonials, FAQ, FinalCTA, Footer
});