// Site sections that compose a full page for either variant.
// Variant-specific visual details live in CSS via body[data-variant].
const SECTIONS = {};

SECTIONS.Hero = function Hero({ lang, variant }) {
  const t = window.useT(lang);
  const title = variant === "A" ? t.hero.title_a : t.hero.title_b;
  return (
    <section id="top" className="hero" data-screen-label="Hero">
      <div className="hero-grid-bg"/>
      <div className="hero-glow"/>
      <div className="hero-signals" aria-hidden="true">
        <span className="hero-signal"/><span className="hero-signal"/><span className="hero-signal"/><span className="hero-signal"/><span className="hero-signal"/>
      </div>
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <window.Reveal>
          <span className="eyebrow">{t.hero.eyebrow}</span>
        </window.Reveal>
        <window.Reveal delay={80}>
          <h1 className="h-display" style={{ marginTop: 28 }}>
            {title[0]} <span className="accent">{title[1]}</span> {title[2]}
          </h1>
        </window.Reveal>
        <window.Reveal delay={180}>
          <p className="hero-sub">{t.hero.sub}</p>
        </window.Reveal>
        <window.Reveal delay={260}>
          <div className="hero-ctas">
            <a href="#contact-form" className="btn btn-primary btn-lg">{t.hero.cta_primary} →</a>
            <a href="#demo" className="btn btn-ghost btn-lg">{t.hero.cta_secondary}</a>
          </div>
        </window.Reveal>
        <div className="hero-stats">
          {t.hero.stats.map((s, i) => (
            <window.Reveal key={i} delay={400 + i * 100}>
              <div className="stat">
                <div className="stat-k">{s.k}</div>
                <div className="stat-v">{s.v}</div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

SECTIONS.Logos = function Logos({ lang }) {
  const t = window.useT(lang);
  const logos = ["Orbit Mobility", "Janssen Interieur", "Noord Dental", "Lume Studio", "Finch & Co", "Koenen Praktijk"];
  return (
    <section className="logos" style={{ padding: "48px 0" }} data-screen-label="Logos">
      <div className="wrap">
        <div className="logos-label">{t.logos}</div>
        <div className="logos-grid">
          {logos.map(l => (
            <div key={l} className="logo-item">
              <svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="5" fill="none" stroke="currentColor" strokeWidth="1.2"/><circle cx="8" cy="8" r="2" fill="currentColor"/></svg>
              {l}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

SECTIONS.About = function About({ lang }) {
  const t = window.useT(lang);
  return (
    <section id="about" data-screen-label="About">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">About</span></window.Reveal>
        </div>
        <div className="about-grid">
          <window.Reveal>
            <p className="about-text">
              {lang === "nl" ? (
                <>Solane is gebouwd door <strong>twee 18-jarigen</strong> die obsessief bezig zijn met AI en IT. We zagen ondernemers om ons heen verzuipen in mails en gemiste telefoontjes — en besloten er iets aan te doen. <br/><br/>Wij bouwen systemen die wij zelf zouden willen gebruiken: scherp, snel, en zonder onnodige lagen. Geen bureau-gedoe, geen powerpoints, gewoon werkende automatisering die jou <strong>tijd en omzet</strong> teruggeeft.</>
              ) : (
                <>Solane is built by <strong>two 18-year-olds</strong> obsessed with AI and IT. We saw business owners around us drowning in email and missed calls — and decided to do something about it.<br/><br/>We build systems we'd want to use ourselves: sharp, fast, no unnecessary layers. No agency fluff, no slide decks, just working automation that gives you back <strong>time and revenue</strong>.</>
              )}
            </p>
          </window.Reveal>
          <div className="founders">
            <window.Reveal delay={100}>
              <div className="founder">
                <div className="founder-avatar">SH</div>
                <div>
                  <div className="founder-name">Shabad</div>
                  <div className="founder-role">CO-FOUNDER · 18</div>
                </div>
              </div>
            </window.Reveal>
            <window.Reveal delay={180}>
              <div className="founder">
                <div className="founder-avatar alt">KV</div>
                <div>
                  <div className="founder-name">Kevin</div>
                  <div className="founder-role">CO-FOUNDER · 18</div>
                </div>
              </div>
            </window.Reveal>
          </div>
        </div>
      </div>
    </section>
  );
};

SECTIONS.Services = function Services({ lang }) {
  const t = window.useT(lang).services;
  return (
    <section id="services" data-screen-label="Services">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
        </div>
        <div className="svc-grid">
          <window.Reveal delay={100}>
            <div className="svc-card">
              <span className="svc-tag">{t.email.tag}</span>
              <h3 className="svc-title">{t.email.title}</h3>
              <p className="svc-desc">{t.email.desc}</p>
              <div className="svc-visual">
                {[
                  { from: "potential.client@gmail.com", bucket: "New request", cls: "bucket-new" },
                  { from: "no-reply@promo.ai", bucket: "Spam", cls: "bucket-spam" },
                  { from: "invoices@vendor.nl", bucket: "Invoice", cls: "bucket-invoice" },
                  { from: "support.ticket@user.co", bucket: "Inbox", cls: "bucket-inbox" },
                ].map((r, i) => (
                  <div key={i} className="email-row">
                    <span style={{ color: "var(--fg-mute)" }}>→</span>
                    <span className="email-from">{r.from}</span>
                    <span className={`email-bucket ${r.cls}`}>{r.bucket}</span>
                  </div>
                ))}
              </div>
              <div className="svc-bullets">
                {t.email.bullets.map((b, i) => (
                  <div key={i} className="svc-bullet"><span className="svc-bullet-dot"/> <span>{b}</span></div>
                ))}
              </div>
            </div>
          </window.Reveal>
          <window.Reveal delay={200}>
            <div className="svc-card">
              <span className="svc-tag">{t.voice.tag}</span>
              <h3 className="svc-title">{t.voice.title}</h3>
              <p className="svc-desc">{t.voice.desc}</p>
              <div className="voice-viz">
                <div className="voice-call-line"><span className="voice-pulse"/><span style={{ color: "var(--fg)" }}>+31 6 ···· 4412</span><span style={{ color: "var(--fg-mute)", marginLeft: "auto" }}>14:23 · 0:47</span></div>
                <div className="voice-call-line" style={{ opacity: .6 }}><span style={{ width: 10, height: 10, borderRadius: 50, background: "var(--fg-mute)" }}/><span>+31 20 ··· 881</span><span style={{ marginLeft: "auto", color: "var(--fg-mute)" }}>14:19 · resolved</span></div>
                <div className="voice-call-line" style={{ opacity: .35 }}><span style={{ width: 10, height: 10, borderRadius: 50, background: "var(--fg-mute)" }}/><span>+31 6 ···· 7099</span><span style={{ marginLeft: "auto", color: "var(--fg-mute)" }}>14:02 · booked</span></div>
              </div>
              <div className="svc-bullets">
                {t.voice.bullets.map((b, i) => (
                  <div key={i} className="svc-bullet"><span className="svc-bullet-dot"/> <span>{b}</span></div>
                ))}
              </div>
            </div>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
};

SECTIONS.How = function How({ lang }) {
  const t = window.useT(lang).how;
  return (
    <section id="how" data-screen-label="How">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
        </div>
        <div className="how-grid">
          {t.steps.map((s, i) => (
            <window.Reveal key={i} delay={i * 100}>
              <div className="how-step">
                <div className="how-n">{s.n}</div>
                <div className="how-t">{s.t}</div>
                <div className="how-d">{s.d}</div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

SECTIONS.Demo = function Demo({ lang, variant }) {
  const t = window.useT(lang).demo;
  return (
    <section id="demo" data-screen-label="Demo">
      <div className="wrap">
        <div className="section-head" style={{ textAlign: "center", alignItems: "center", margin: "0 auto 64px" }}>
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
          <window.Reveal delay={160}><p className="muted" style={{ fontSize: 18 }}>{t.sub}</p></window.Reveal>
        </div>
        <window.Reveal delay={120}>
          <window.VoiceDemo lang={lang} variant={variant}/>
        </window.Reveal>
      </div>
    </section>
  );
};

SECTIONS.Cases = function Cases({ lang }) {
  const t = window.useT(lang).cases;
  return (
    <section id="cases" data-screen-label="Cases">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
        </div>
        <div className="cases-grid">
          {t.items.map((c, i) => (
            <window.Reveal key={i} delay={i * 100}>
              <div className="case-card">
                <div className="case-sector">{c.sector}</div>
                <div>
                  <div className="case-metric">{c.metric}</div>
                  <div className="case-label">{c.label}</div>
                </div>
                <div className="case-desc">{c.desc}</div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

SECTIONS.Testimonials = function Testimonials({ lang }) {
  const t = window.useT(lang).testimonials;
  return (
    <section id="testimonials" data-screen-label="Testimonials">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
        </div>
        <div className="test-grid">
          {t.items.map((tm, i) => (
            <window.Reveal key={i} delay={i * 100}>
              <div className="test-card">
                <div className="test-q">"{tm.q}"</div>
                <div>
                  <div className="test-n">{tm.n}</div>
                  <div className="test-r">{tm.r}</div>
                </div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

SECTIONS.Pricing = function Pricing({ lang }) {
  const t = window.useT(lang).pricing;
  return (
    <section id="pricing" data-screen-label="Pricing">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
          <window.Reveal delay={160}><p className="muted" style={{ fontSize: 18 }}>{t.sub}</p></window.Reveal>
        </div>
        <window.Reveal>
          <div className="pricing-grid">
            {t.plans.map((p, i) => (
              <div key={i} className={`plan ${i === 1 ? "featured" : ""}`}>
                {p.tag && <div className="plan-tag">{p.tag}</div>}
                <div className="plan-name">{p.name}</div>
                <div>
                  <div className="plan-price">
                    <span className="plan-price-big">{p.price}</span>
                    <span className="plan-per">{p.per}</span>
                  </div>
                  <div className="plan-setup">+ {p.setup}</div>
                </div>
                <div className="plan-desc">{p.desc}</div>
                <div className="plan-features">
                  {p.features.map((f, j) => (
                    <div key={j} className="plan-feature">{f}</div>
                  ))}
                </div>
                <a href="#contact-form" className={`btn ${i === 1 ? "btn-primary" : "btn-ghost"}`} style={{ marginTop: "auto" }}>
                  {lang === "nl" ? "Kies plan" : "Choose plan"} →
                </a>
              </div>
            ))}
          </div>
        </window.Reveal>
      </div>
    </section>
  );
};

SECTIONS.ROI = function ROI({ lang, variant }) {
  const t = window.useT(lang).roi;
  return (
    <section id="roi" data-screen-label="ROI">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
        </div>
        <window.Reveal><window.ROICalculator lang={lang} variant={variant}/></window.Reveal>
      </div>
    </section>
  );
};

SECTIONS.Contact = function Contact({ lang, variant }) {
  const t = window.useT(lang);
  return (
    <section id="contact-form" data-screen-label="Contact">
      <div className="wrap">
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.form.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.form.title}</h2></window.Reveal>
          <window.Reveal delay={160}><p className="muted" style={{ fontSize: 18 }}>{t.form.sub}</p></window.Reveal>
        </div>
        <div className="contact-grid">
          <window.Reveal>
            <div className="contact-info-card" id="contact">
              <div>
                <div className="eyebrow" style={{ marginBottom: 8 }}>{t.contact.eyebrow}</div>
                <h3 style={{ fontSize: 28, letterSpacing: "-0.02em", marginTop: 12, fontFamily: variant === "B" ? "Instrument Serif, serif" : undefined, fontWeight: variant === "B" ? 400 : 500 }}>{t.contact.title}</h3>
              </div>
              <div className="contact-item">
                <span className="contact-label">Email</span>
                <span className="contact-val"><a href={`mailto:${t.contact.email}`}>{t.contact.email}</a></span>
              </div>
              <div className="contact-item">
                <span className="contact-label">Phone</span>
                <span className="contact-val"><a href={`tel:${t.contact.phone.replace(/\s/g,"")}`}>{t.contact.phone}</a></span>
              </div>
              <div className="contact-item">
                <span className="contact-label">{lang === "nl" ? "Kantoor" : "Office"}</span>
                <span className="contact-val">{t.contact.address}</span>
              </div>
              <div className="contact-item">
                <span className="contact-label">{lang === "nl" ? "Openingstijden" : "Hours"}</span>
                <span className="contact-val">{t.contact.hours}</span>
              </div>
              <div className="contact-founders">
                <div className="contact-founder-avatars">
                  <div className="founder-avatar" style={{ width: 40, height: 40, fontSize: 13 }}>SH</div>
                  <div className="founder-avatar alt" style={{ width: 40, height: 40, fontSize: 13 }}>KV</div>
                </div>
                <span className="muted" style={{ fontSize: 13 }}>{t.contact.founders}</span>
              </div>
            </div>
          </window.Reveal>
          <window.Reveal delay={120}>
            <window.MultiStepForm lang={lang} variant={variant}/>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
};

SECTIONS.FAQSection = function FAQSection({ lang, variant }) {
  const t = window.useT(lang).faq;
  return (
    <section id="faq" data-screen-label="FAQ">
      <div className="wrap" style={{ maxWidth: 960 }}>
        <div className="section-head">
          <window.Reveal><span className="eyebrow">{t.eyebrow}</span></window.Reveal>
          <window.Reveal delay={80}><h2 className="h-section">{t.title}</h2></window.Reveal>
        </div>
        <window.Reveal><window.FAQ lang={lang} variant={variant}/></window.Reveal>
      </div>
    </section>
  );
};

Object.assign(window, { SECTIONS });