// Closing.jsx — S7 Why Conversion Works / "Built by Taurist" · S8 Final CTA + Worker Bee · Footer
function WhyRow({ icon, tone, t, d }) {
  return (
    <div className={"why-row why-row--" + tone}>
      <span className={"why-ic why-ic--" + tone}><i className={icon} /></span>
      <div className="why-row-txt">
        <div className="why-row-t">{t}</div>
        <div className="why-row-d">{d}</div>
      </div>
    </div>
  );
}

function Founder() {
  const ref = useReveal();
  const notRows = [
    { i: "ri-file-text-line", t: "PDF handoff",          d: "Not a deck of screenshots that leaves your team wondering what to do next." },
    { i: "ri-repeat-line",    t: "Forced retainer",      d: "Not a pitch to keep paying before the right execution path is clear." },
    { i: "ri-flask-line",     t: "Underpowered testing", d: "Not A/B tests for the sake of testing when traffic cannot support a real read." },
  ];
  const wayRows = [
    { i: "ri-team-line",       tone: "magenta", t: "Implement internally",          d: "Your team gets clear priorities, screenshots, examples, and instructions they can ship themselves." },
    { i: "ri-pen-nib-line",    tone: "violet",  t: "Design and test setup",         d: "We turn priority fixes into variants, QA the experience, and prepare the measurement plan." },
    { i: "ri-loop-right-line", tone: "magenta", t: "Full optimization loop",        d: "Plan, design, develop, test, iterate, and measure with Conversion Works leading the process." },
    { i: "ri-flask-line",      tone: "violet",  t: "Test when traffic supports it", d: "When sample size and scope are strong enough, we set up clean experiments around the highest-impact lanes." },
    { i: "ri-rocket-2-line",   tone: "magenta", t: "Ship when testing does not fit", d: "If the fix is obvious or traffic is limited, we help ship the evidence-backed change and measure with the strongest available signals." },
  ];
  return (
    <section className="section section--raised">
      <div className="wrap">
        <div ref={ref} className="reveal cred-layout">
          {/* LEFT — positioning statement + reassurance callout */}
          <div className="cred-left">
            <div className="eyebrow"><span className="dot" />After the audit</div>
            <h2 className="h-section why-headline" style={{ marginTop: 16 }}>
              Not a PDF handoff.<br />Not a forced retainer.<br />Not <span className="gradient-text">another month of guessing.</span>
            </h2>
            <p className="p-lead">
              The audit gives you the roadmap. After that, you can implement it internally, bring us in for design and test setup, or continue into the full optimization loop.
            </p>
            <p className="p-lead" style={{ marginTop: 14 }}>
              The next step is scoped around your traffic, team, and the fixes most likely to move conversion.
            </p>
            <div className="cred-why glass">
              <div className="cred-why-title">Your next step should match your store.</div>
              <p className="cred-why-body">
                Some recommendations should be shipped. Some should be tested. Some should wait. We help you decide based on impact, effort, confidence, traffic, and how your team actually works.
              </p>
              <div className="cred-why-foot">
                <i className="ri-rocket-2-line" />Built for audit-to-action momentum.
              </div>
              <p className="cred-why-credit">
                <i className="ri-coupon-3-line" />
                <span>Continue with Conversion Works within 90 days and your audit fee is credited toward the first 3 months of your follow-on engagement.</span>
              </p>
            </div>
          </div>

          {/* RIGHT — contrast cards: what it is not / the Conversion Works way */}
          <div className="cred-right">
            <div className="glass card-mat why-card why-card--neg" style={{ "--bi": 0 }}>
              <span className="card-beam" aria-hidden="true" style={{ "--bi": 0 }} />
              <div className="why-card-head">
                <span className="why-eyebrow why-eyebrow--neg">What it is not</span>
                <h3 className="why-card-title">The usual post-audit traps, skipped.</h3>
              </div>
              <div className="why-rows">
                {notRows.map((r) => <WhyRow key={r.t} icon={r.i} tone="neg" t={r.t} d={r.d} />)}
              </div>
            </div>

            <div className="glass glass--featured card-mat why-card" style={{ "--bi": 1 }}>
              <span className="card-beam" aria-hidden="true" style={{ "--bi": 1 }} />
              <div className="why-card-head">
                <span className="why-eyebrow">The Conversion Works way</span>
                <h3 className="why-card-title">A roadmap that becomes the right kind of execution.</h3>
              </div>
              <div className="why-rows">
                {wayRows.map((r) => <WhyRow key={r.t} icon={r.i} tone={r.tone} t={r.t} d={r.d} />)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkflowForm() {
  const areas = ["Marketing site", "Custom Shopify", "B2B / SaaS", "Full rebuild", "Landing pages", "Something else"];
  const [area, setArea] = useState("");
  const [email, setEmail] = useState("");
  const [detail, setDetail] = useState("");
  const [err, setErr] = useState("");
  const [done, setDone] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!area) { setErr("Pick what you need built."); return; }
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setErr("Enter a valid work email."); return; }
    setErr("");
    setDone(true);
  };

  if (done) {
    return (
      <div className="glass glass--featured" style={{ padding: 32, textAlign: "center" }}>
        <div style={{ width: 56, height: 56, borderRadius: "50%", margin: "0 auto 18px", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(47,211,122,0.14)", border: "1px solid rgba(47,211,122,0.34)" }}>
          <i className="ri-check-line" style={{ fontSize: 28, color: "var(--success)" }} />
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, color: "var(--fg1)", margin: 0 }}>Got it — let's take a look.</h3>
        <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 15, lineHeight: 1.6, color: "var(--fg2)", margin: "12px auto 0", maxWidth: 360 }}>
          We'll review the <strong style={{ fontWeight: 600, color: "var(--magenta-200)" }}>{area.toLowerCase()}</strong> you flagged and come back with a concept direction and the opportunities we'd act on first.
        </p>
        <button className="btn btn-secondary" style={{ marginTop: 22 }} onClick={() => { setDone(false); setArea(""); setEmail(""); setDetail(""); }}>
          Send another
        </button>
      </div>
    );
  }

  return (
    <form className="glass cta-form" style={{ padding: 28 }} onSubmit={submit} noValidate>
      <div>
        <label className="field-label">What do you need built?</label>
        <div className="chip-select">
          {areas.map((a) => (
            <button type="button" key={a} className={`chip-opt ${area === a ? "sel" : ""}`} onClick={() => setArea(a)}>{a}</button>
          ))}
        </div>
      </div>
      <div>
        <label className="field-label">Your current site <span style={{ color: "var(--fg3)", fontWeight: 400 }}>(optional)</span></label>
        <textarea className="field-textarea" rows={2} placeholder="yoursite.com — or a line about the business and what's not working." value={detail} onChange={(e) => setDetail(e.target.value)} />
      </div>
      <div>
        <label className="field-label">Work email</label>
        <div className="field">
          <i className="ri-mail-line" />
          <input type="email" placeholder="you@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
      </div>
      {err && <div style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--danger)", display: "flex", alignItems: "center", gap: 7 }}><i className="ri-error-warning-line" />{err}</div>}
      <button type="submit" className="btn btn-primary" style={{ justifyContent: "center", marginTop: 4 }}>Request a website concept <i className="ri-arrow-right-line" /></button>
      <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 12.5, color: "var(--fg3)", margin: 0, textAlign: "center" }}>No obligation. No generic pitch deck. A real read on your site.</p>
    </form>
  );
}

function FinalCTA() {
  const ref = useReveal();
  return (
    <section id="cta" className="section" style={{ position: "relative", overflow: "hidden" }}>
      <div className="haze-bloom" style={{ opacity: 0.3 }} />
      <div ref={ref} className="reveal wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="cta-grid">
          <div id="review">
            <div className="eyebrow"><span className="dot" />Request a website concept</div>
            <h2 className="cta-h2" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 48, lineHeight: 1.08, letterSpacing: "-0.02em", color: "var(--fg1)", margin: "18px 0 0", textWrap: "balance" }}>
              See what your site could be <span className="gradient-text">before you commit to anything.</span>
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 18, lineHeight: 1.6, color: "var(--fg2)", margin: "22px 0 0", maxWidth: 460 }}>
              Tell us about your business and current site. We'll come back with a concept direction and the honest opportunities we'd act on first.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14.5, lineHeight: 1.55, color: "var(--fg2)", margin: "14px 0 0", maxWidth: 460 }}>
              No prep needed. No generic pitch. A real read on your site.
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 26, flexWrap: "wrap" }}>
              <span style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14.5, color: "var(--fg2)" }}>
                Rather discuss your website with one of our founders?
              </span>
              <a href="#" className="btn btn-secondary"><i className="ri-calendar-line" /> Book a call</a>
            </div>
          </div>
          <WorkerBee />
        </div>
      </div>
    </section>
  );
}

// glow multiplier helper for inline opacity
function calcGlow(base) {
  const v = getComputedStyle(document.documentElement).getPropertyValue("--glow-mult");
  const m = parseFloat(v) || 1;
  return Math.min(1, base * m);
}

function FootLink({ children, href, external }) {
  const ext = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
  return (
    <a href={href} {...ext} style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, color: "var(--fg3)", textDecoration: "none", transition: "color .15s", width: "fit-content" }}
      onMouseEnter={(e) => (e.currentTarget.style.color = "var(--magenta-300)")}
      onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg3)")}>{children}</a>
  );
}

function Footer() {
  const workersLinks = [
    { t: "The problem", href: "#work" },
    { t: "What we build", href: "#workers" },
    { t: "Process", href: "#how" },
    { t: "Why Conversion Works", href: "#control" },
    { t: "Selected work", href: "#proof" },
  ];
  const tauristLinks = [
    { t: "Taurist Technologies", href: "https://www.taurist.com/" },
    { t: "Workers", href: "https://www.taurist.com/workers" },
    { t: "Conversion Works", href: "https://www.taurist.com/conversion" },
    { t: "About", href: "https://www.taurist.com/about" },
    { t: "Email us", href: "mailto:hello@taurist.com" },
  ];
  const colHead = { fontFamily: "var(--font-ui)", fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--fg2)", marginBottom: 16 };
  const policy = { fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg3)", textDecoration: "none", transition: "color .15s" };
  const onP = (e) => (e.currentTarget.style.color = "var(--fg1)");
  const offP = (e) => (e.currentTarget.style.color = "var(--fg3)");
  return (
    <footer style={{ borderTop: "1px solid var(--border-subtle)", background: "var(--neutral-900)", paddingTop: 64, position: "relative" }}>
      <div className="streak" style={{ position: "absolute", top: 0, left: 0, right: 0, opacity: 0.4 }} />
      <div className="wrap">
        <div style={{ display: "grid", gap: 40, paddingBottom: 52 }} className="footer-grid">
          {/* brand block */}
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", rowGap: 8 }}>
              <Logo height={40} />
              <span style={{ width: 1, height: 20, background: "var(--border-default)" }} />
              <span style={{ fontFamily: "var(--font-ui)", fontSize: 12, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg3)" }}>by Taurist Technologies Inc</span>
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: "var(--fg2)", margin: "20px 0 0", maxWidth: 340 }}>
              Premium, conversion-aware websites for businesses that have outgrown their current site.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: "var(--fg2)", margin: "10px 0 0", maxWidth: 340 }}>
              Strategy, design, and build — led by senior judgment, start to finish.
            </p>
            <a href="#cta" className="btn btn-primary btn-sm" style={{ marginTop: 24 }}>Book a Shopify Audit <i className="ri-arrow-right-line" /></a>
          </div>

          {/* Workers links */}
          <div>
            <div style={colHead}>Conversion Works</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
              {workersLinks.map((l) => <FootLink key={l.t} href={l.href}>{l.t}</FootLink>)}
            </div>
          </div>

          {/* Taurist links */}
          <div>
            <div style={colHead}>Taurist</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
              {tauristLinks.map((l) => <FootLink key={l.t} href={l.href} external={l.href.startsWith("http")}>{l.t}</FootLink>)}
            </div>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "22px 0", borderTop: "1px solid var(--border-subtle)", flexWrap: "wrap", gap: 16 }}>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg3)" }}>© 2026 Taurist Technologies Inc. All rights reserved.</span>
          <a href="https://www.taurist.com/siteworks" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg3)", textDecoration: "none", transition: "color .15s" }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg1)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg3)")}>
            Like this site? Built by
            <img src={assetUrl("assets/siteworks-mark.avif")} alt="" width="20" height="20" style={{ display: "block" }} />
            <span style={{ fontWeight: 600, color: "var(--fg1)" }}>Siteworks.</span>
          </a>
          <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
            <a href="https://www.taurist.com/privacy-policy" style={policy} onMouseEnter={onP} onMouseLeave={offP}>Privacy Policy</a>
            <a href="https://www.taurist.com/terms-conditions" style={policy} onMouseEnter={onP} onMouseLeave={offP}>Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Founder, FinalCTA, Footer });