// Closing.jsx — S7 Why Siteworks / "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-robot-2-line",   t: "AI builder",              d: "Not a generic page assembled from prompts." },
    { i: "ri-file-copy-line", t: "Template swap",           d: "Not a prettier version of the same unclear website." },
    { i: "ri-briefcase-line", t: "Bloated agency project",  d: "Not months of meetings, handoffs, and technical fog." },
  ];
  const wayRows = [
    { i: "ri-focus-3-line",        tone: "magenta", t: "Message before design",          d: "We clarify what the site needs to explain, prove, and make visitors do." },
    { i: "ri-pencil-ruler-2-line", tone: "violet",  t: "Homepage prototype before the call", d: "You see a real first-page direction before deciding what comes next." },
    { i: "ri-cursor-line",         tone: "magenta", t: "Built around action",             d: "Every page points visitors toward the next useful step." },
    { i: "ri-rocket-2-line",       tone: "violet",  t: "Launch and care handled",         d: "Hosting, maintenance, updates, and support are handled after launch." },
    { i: "ri-line-chart-line",     tone: "magenta", t: "Conversion-focused by default",   d: "The site is built to be clearer, more credible, and easier to act on." },
  ];
  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" />Why Siteworks</div>
            <h2 className="h-section why-headline" style={{ marginTop: 16 }}>
              Not an AI builder.<br />Not a template swap.<br />Not a <span className="gradient-text">bloated agency project.</span>
            </h2>
            <p className="p-lead">
              Siteworks is for businesses that want a better website without becoming website managers. You get the message, design, build, launch, hosting, and ongoing support handled in one clear path.
            </p>
            <div className="cred-why glass">
              <div className="cred-why-title">A better site should feel handled.</div>
              <p className="cred-why-body">
                We clarify what the site needs to say, show, and make visitors do. Then we turn it into a premium website that is easier to trust, easier to act on, and easier to keep moving after launch.
              </p>
              <div className="cred-why-foot">
                <i className="ri-shield-check-line" />Built by Taurist Technologies.
              </div>
            </div>
          </div>

          {/* RIGHT — contrast cards: what it is not / the Siteworks 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 website shortcuts, 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 Siteworks way</span>
                <h3 className="why-card-title">A better website, without the usual mess.</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 homepage prototype 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 homepage prototype <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 homepage prototype</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 homepage prototype 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 Siteworks", href: "#control" },
    { t: "Selected work", href: "#proof" },
  ];
  const tauristLinks = [
    { t: "Taurist Technologies", href: "https://taurist.com" },
    { t: "Workers", href: "https://taurist.com/workers" },
    { t: "Conversion Works", href: "https://taurist.com/conversionworks" },
    { t: "About", href: "https://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={24} />
              <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 }}>Request a prototype <i className="ri-arrow-right-line" /></a>
          </div>

          {/* Workers links */}
          <div>
            <div style={colHead}>Siteworks</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>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg3)" }}>
            <img src={assetUrl("assets/taurist-mark.png")} alt="" width="18" height="18" style={{ display: "block" }} />
            A <span style={{ fontWeight: 500, color: "var(--fg2)" }}>Taurist Technologies</span> brand.
          </span>
          <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
            <a href="#" style={policy} onMouseEnter={onP} onMouseLeave={offP}>Privacy Policy</a>
            <a href="#" style={policy} onMouseEnter={onP} onMouseLeave={offP}>Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

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