// Shared primitives for Solane site
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ---------- i18n hook ----------
function useT(lang) {
  return window.I18N[lang];
}

// ---------- Intersection reveal ----------
function Reveal({ children, delay = 0, as: As = "div", className = "", style = {} }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={className}
       style={{
         ...style,
         opacity: shown ? 1 : 0,
         transform: shown ? "translateY(0)" : "translateY(24px)",
         transition: `opacity 700ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 700ms cubic-bezier(.2,.7,.2,1) ${delay}ms`
       }}>
      {children}
    </As>
  );
}

// ---------- Language toggle ----------
function LangToggle({ lang, setLang, variant = "A" }) {
  const style = variant === "A"
    ? { border: "1px solid rgba(255,255,255,.15)", background: "rgba(255,255,255,.03)" }
    : { border: "1px solid rgba(255,255,255,.12)", background: "rgba(255,255,255,.04)" };
  return (
    <div className="lang-toggle" style={style}>
      {["nl","en"].map(l => (
        <button key={l} onClick={() => setLang(l)}
          className={lang === l ? "active" : ""}
          aria-label={l}>{l.toUpperCase()}</button>
      ))}
    </div>
  );
}

// ---------- Nav ----------
function Nav({ lang, setLang, variant = "A" }) {
  const t = useT(lang);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", h); h();
    return () => window.removeEventListener("scroll", h);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`} data-variant={variant}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <BrandMark variant={variant} />
          <span>Solane</span>
        </a>
        <div className="nav-links">
          <a href="#services">{t.nav.services}</a>
          <a href="#how">{t.nav.how}</a>
          <a href="#cases">{t.nav.cases}</a>
          <a href="#pricing">{t.nav.pricing}</a>
          <a href="#faq">{t.nav.faq}</a>
        </div>
        <div className="nav-right">
          <LangToggle lang={lang} setLang={setLang} variant={variant} />
          <a href="#contact-form" className="btn btn-primary btn-sm">{t.nav.cta} →</a>
        </div>
      </div>
    </nav>
  );
}

// ---------- Brand mark ----------
function BrandMark({ variant = "A", size = 28 }) {
  if (variant === "A") {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <rect x="2" y="2" width="28" height="28" rx="6" stroke="currentColor" strokeWidth="1.5"/>
        <circle cx="16" cy="16" r="4" fill="currentColor"/>
        <circle cx="16" cy="16" r="9" stroke="currentColor" strokeWidth="1" opacity=".4"/>
      </svg>
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 32 32">
      <defs>
        <linearGradient id="bm-b" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#7b5cff"/>
          <stop offset="1" stopColor="#00e0ff"/>
        </linearGradient>
      </defs>
      <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#bm-b)"/>
      <circle cx="16" cy="16" r="5" fill="#0a0618"/>
    </svg>
  );
}

// ---------- Footer ----------
function Footer({ lang, variant }) {
  const t = useT(lang);
  return (
    <footer className="footer" data-variant={variant}>
      <div className="wrap footer-inner">
        <div>
          <div className="brand" style={{ color: "inherit" }}>
            <BrandMark variant={variant} />
            <span>Solane</span>
          </div>
          <p className="muted" style={{ marginTop: 16, maxWidth: 320 }}>{t.footer.tagline}</p>
        </div>
        <div className="footer-cols">
          <div>
            <div className="footer-h">Product</div>
            <a href="#services">{t.nav.services}</a>
            <a href="#pricing">{t.nav.pricing}</a>
            <a href="#demo">Demo</a>
          </div>
          <div>
            <div className="footer-h">Solane</div>
            <a href="#about">About</a>
            <a href="#cases">{t.nav.cases}</a>
            <a href="#contact-form">{t.nav.contact}</a>
          </div>
          <div>
            <div className="footer-h">Legal</div>
            {t.footer.links.map((l,i) => <a key={i} href="#">{l}</a>)}
          </div>
        </div>
      </div>
      <div className="wrap footer-bottom">
        <span className="muted mono">{t.footer.copy}</span>
        <span className="muted mono">NL · EN</span>
      </div>
    </footer>
  );
}

// ---------- Multi-step form ----------
function MultiStepForm({ lang, variant }) {
  const t = useT(lang).form;
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    intent: "", size: "", volume: "", start: "",
    name: "", company: "", email: "", phone: "", notes: ""
  });
  const [done, setDone] = useState(false);
  const total = 4;
  const set = (k, v) => setData(d => ({...d, [k]: v}));

  const canNext = () => {
    if (step === 0) return !!data.intent;
    if (step === 1) return !!data.size && !!data.volume;
    if (step === 2) return !!data.start;
    if (step === 3) return data.name && data.company && data.email;
    return true;
  };

  const submit = () => {
    // simulate
    setDone(true);
  };

  if (done) {
    return (
      <div className="form-card form-done">
        <div className="form-check">
          <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <h3>{t.done_title}</h3>
        <p className="muted">{t.done_sub}</p>
        <button className="btn btn-ghost" onClick={() => { setDone(false); setStep(0); setData({intent:"",size:"",volume:"",start:"",name:"",company:"",email:"",phone:"",notes:""}); }}>
          {t.done_cta} →
        </button>
      </div>
    );
  }

  return (
    <div className="form-card">
      <div className="form-head">
        <div className="form-step mono">{t.step} {step+1} {t.of} {total}</div>
        <div className="form-progress">
          {[0,1,2,3].map(i => (
            <div key={i} className={`form-dot ${i <= step ? "filled" : ""}`} />
          ))}
        </div>
      </div>

      <div className="form-body" key={step}>
        {step === 0 && (
          <>
            <h3>{t.s1_q}</h3>
            <div className="form-opts">
              {t.s1_opts.map(o => (
                <button key={o.k}
                  className={`form-opt ${data.intent === o.k ? "sel" : ""}`}
                  onClick={() => set("intent", o.k)}>
                  <div className="form-opt-title">{o.t}</div>
                  <div className="form-opt-desc muted">{o.d}</div>
                </button>
              ))}
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <h3>{t.s2_q}</h3>
            <div className="form-sub-label mono">{t.s2_size}</div>
            <div className="form-opts-row">
              {t.s2_size_opts.map(o => (
                <button key={o} onClick={() => set("size", o)}
                  className={`form-chip ${data.size === o ? "sel" : ""}`}>{o}</button>
              ))}
            </div>
            <div className="form-sub-label mono" style={{ marginTop: 28 }}>{t.s2_vol}</div>
            <div className="form-opts-row">
              {t.s2_vol_opts.map(o => (
                <button key={o} onClick={() => set("volume", o)}
                  className={`form-chip ${data.volume === o ? "sel" : ""}`}>{o}</button>
              ))}
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h3>{t.s3_q}</h3>
            <div className="form-opts-row">
              {t.s3_opts.map(o => (
                <button key={o} onClick={() => set("start", o)}
                  className={`form-chip lg ${data.start === o ? "sel" : ""}`}>{o}</button>
              ))}
            </div>
          </>
        )}

        {step === 3 && (
          <>
            <h3>{t.s4_q}</h3>
            <div className="form-grid">
              <label><span className="mono">{t.s4_name}</span>
                <input value={data.name} onChange={e => set("name", e.target.value)} placeholder="Kevin Jansen"/>
              </label>
              <label><span className="mono">{t.s4_company}</span>
                <input value={data.company} onChange={e => set("company", e.target.value)} placeholder="Solane"/>
              </label>
              <label><span className="mono">{t.s4_email}</span>
                <input type="email" value={data.email} onChange={e => set("email", e.target.value)} placeholder="kevin@solane.ai"/>
              </label>
              <label><span className="mono">{t.s4_phone}</span>
                <input value={data.phone} onChange={e => set("phone", e.target.value)} placeholder="+31 6 ..."/>
              </label>
              <label className="span-2"><span className="mono">{t.s4_notes}</span>
                <textarea rows="3" value={data.notes} onChange={e => set("notes", e.target.value)} placeholder="..."/>
              </label>
            </div>
          </>
        )}
      </div>

      <div className="form-foot">
        <button className="btn btn-ghost" disabled={step === 0} onClick={() => setStep(s => Math.max(0, s-1))}>
          ← {t.prev}
        </button>
        {step < total - 1 ? (
          <button className="btn btn-primary" disabled={!canNext()} onClick={() => setStep(s => s+1)}>
            {t.next} →
          </button>
        ) : (
          <button className="btn btn-primary" disabled={!canNext()} onClick={submit}>
            {t.submit} →
          </button>
        )}
      </div>
    </div>
  );
}

// ---------- ROI Calculator ----------
function ROICalculator({ lang, variant }) {
  const t = useT(lang).roi;
  const [calls, setCalls] = useState(40);
  const [missed, setMissed] = useState(25);
  const [avg, setAvg] = useState(180);
  const weeksPerMonth = 4.33;
  const missedRev = Math.round(calls * (missed/100) * avg * weeksPerMonth);
  const recover = Math.round(missedRev * 0.7);
  const monthlyFee = 895;
  const payback = recover > 0 ? (monthlyFee / recover) * 30 : 999;
  const paybackStr = payback < 30 ? `${Math.max(1, Math.round(payback))} ${lang === "nl" ? "dagen" : "days"}` : `${(payback/30).toFixed(1)} ${lang === "nl" ? "maanden" : "months"}`;

  const Slider = ({ label, value, setValue, min, max, step, unit }) => (
    <div className="roi-slider">
      <div className="roi-slider-head">
        <span className="mono">{label}</span>
        <span className="roi-val">{value}{unit}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={e => setValue(Number(e.target.value))} />
    </div>
  );

  return (
    <div className="roi-card" data-variant={variant}>
      <div className="roi-inputs">
        <Slider label={t.calls_per_week} value={calls} setValue={setCalls} min={5} max={300} step={1} unit="" />
        <Slider label={t.missed_pct} value={missed} setValue={setMissed} min={5} max={60} step={1} unit="%" />
        <Slider label={t.avg_value} value={avg} setValue={setAvg} min={20} max={1500} step={10} unit=" €" />
      </div>
      <div className="roi-result">
        <div className="roi-result-label mono">{t.result_title}</div>
        <div className="roi-result-big">€{missedRev.toLocaleString("nl-NL")}</div>
        <div className="roi-result-sub muted">{t.result_sub}</div>
        <div className="roi-result-split">
          <div>
            <div className="mono muted">{t.recover}</div>
            <div className="roi-mid">€{recover.toLocaleString("nl-NL")}</div>
          </div>
          <div>
            <div className="mono muted">{t.payback}</div>
            <div className="roi-mid">{paybackStr}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Voice Agent Demo ----------
function VoiceDemo({ lang, variant }) {
  const t = useT(lang).demo;
  const [playing, setPlaying] = useState(false);
  const [idx, setIdx] = useState(-1);
  const [progress, setProgress] = useState(0);
  const timers = useRef([]);

  const stop = () => {
    timers.current.forEach(clearTimeout);
    timers.current = [];
    setPlaying(false);
  };

  const play = () => {
    if (playing) { stop(); setIdx(-1); setProgress(0); return; }
    setPlaying(true);
    setIdx(-1);
    setProgress(0);
    const perLine = 1800;
    t.transcript.forEach((_, i) => {
      timers.current.push(setTimeout(() => setIdx(i), i * perLine + 200));
    });
    // progress animation
    const total = t.transcript.length * perLine + 400;
    const start = Date.now();
    const tick = () => {
      const p = Math.min(1, (Date.now() - start) / total);
      setProgress(p);
      if (p < 1 && timers.current.length) {
        timers.current.push(setTimeout(tick, 60));
      } else {
        setPlaying(false);
      }
    };
    tick();
  };

  useEffect(() => () => stop(), []);

  return (
    <div className="demo-card" data-variant={variant}>
      <div className="demo-head">
        <div className="demo-indicator">
          <span className={`demo-dot ${playing ? "live" : ""}`}/>
          <span className="mono">{playing ? "LIVE" : "DEMO"}</span>
        </div>
        <div className="demo-meta mono">Solane Voice · EN/NL/DE</div>
      </div>

      <div className="demo-wave">
        {Array.from({length: 40}).map((_, i) => {
          const phase = (i / 40 + progress) * Math.PI * 4;
          const h = playing ? 6 + Math.abs(Math.sin(phase + Date.now()/400)) * 30 : 4;
          return <span key={i} style={{ height: h + "px" }}/>;
        })}
      </div>

      <div className="demo-transcript">
        {t.transcript.map((line, i) => (
          <div key={i} className={`demo-line ${line.who} ${i <= idx ? "in" : ""}`}>
            <span className="demo-who mono">{line.who === "agent" ? "Solane" : "Caller"}</span>
            <span className="demo-text">{line.t}</span>
          </div>
        ))}
      </div>

      <div className="demo-foot">
        <button className="btn btn-primary" onClick={play}>
          {playing ? (lang === "nl" ? "Stop" : "Stop") : (lang === "nl" ? "▶ Speel demo af" : "▶ Play demo")}
        </button>
        <span className="mono muted">{t.caption}</span>
      </div>
    </div>
  );
}

// ---------- FAQ ----------
function FAQ({ lang, variant }) {
  const t = useT(lang).faq;
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {t.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-icon">{open === i ? "–" : "+"}</span>
          </div>
          <div className="faq-a"><p>{it.a}</p></div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  useT, Reveal, LangToggle, Nav, BrandMark, Footer,
  MultiStepForm, ROICalculator, VoiceDemo, FAQ
});