// sections-a.jsx — Nav, Hero, Pain, HowItWorks + shared helpers
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const CALENDLY = "https://calendly.com/coltonhaseltineai/30min";

// Reveal: content is ALWAYS visible (base state opacity 1). Entrance effects were
// removed deliberately — this rendering engine can freeze mid-transition and leave
// content hidden. Never reintroduce opacity:0 base states here.
function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) {
  const Tag = as;
  return <Tag className={`reveal in ${className}`} {...rest}>{children}</Tag>;
}

function Wordmark() {
  return (
    <a href="#top" className="wm" aria-label="Tractus home">
      <span className="wm-mark"><span></span></span>
      <span className="wm-text">TRACTUS</span>
    </a>);

}

function ThemeToggle() {
  const [theme, setTheme] = useStateA(document.documentElement.dataset.theme || "light");
  const flip = () => {
    const next = theme === "light" ? "dark" : "light";
    setTheme(next);
    document.documentElement.dataset.theme = next;
    try {localStorage.setItem("tractus-theme", next);} catch (e) {}
  };
  return (
    <button className="theme-toggle mono" onClick={flip} aria-label="Switch color theme" title="Switch color theme">
      <span className={"t-light" + (theme === "light" ? " on" : "")}>LIGHT</span>
      <span className={"t-dark" + (theme === "dark" ? " on" : "")}>DARK</span>
    </button>);

}

function Nav() {
  const [scrolled, setScrolled] = useStateA(false);
  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
  ["Sound familiar?", "#pain"],
  ["How it works", "#how"],
  ["What's included", "#included"]];

  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <Wordmark />
        <nav className="nav-links">
          {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        </nav>
        <ThemeToggle />
        <a className="btn btn-sm" href="#try">Try it out</a>
      </div>
      <style>{`
        .nav { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
        .nav.scrolled { background: var(--nav-scrim); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
        .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 70px; }
        .wm { display: inline-flex; align-items: center; gap: 10px; }
        .wm-mark { width: 22px; height: 22px; border: 1.5px solid var(--accent); display: grid; place-items: center; }
        .wm-mark span { width: 8px; height: 8px; background: var(--accent); display: block; }
        .wm-text { font-weight: 800; letter-spacing: .22em; font-size: 16px; color: var(--ink); }
        .nav-links { display: flex; gap: 22px; margin-left: 10px; margin-right: auto; }
        .nav-links a { font-size: 14px; color: var(--ink-mut); font-weight: 500; transition: color .15s ease; white-space: nowrap; }
        .nav-links a:hover { color: var(--ink); }
        .theme-toggle { display: flex; gap: 0; flex: none; background: transparent; border: 1px solid var(--line-strong); border-radius: 2px; padding: 0; overflow: hidden; }
        .theme-toggle span { font-size: 10px; letter-spacing: .1em; font-weight: 600; padding: 7px 10px; transition: opacity .15s ease, box-shadow .15s ease; white-space: nowrap; opacity: .5; }
        .theme-toggle span.t-light { background: #ffffff; color: #0e0e12; }
        .theme-toggle span.t-dark { background: #101013; color: #f3f3f5; }
        .theme-toggle span.on { opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }
        .theme-toggle:hover span { opacity: .75; }
        .theme-toggle:hover span.on { opacity: 1; }
        @media (max-width: 1020px) { .nav-links { display: none; } }
      `}</style>
    </header>);

}

function Hero() {
  const HarnessDemo = window.HarnessDemo;
  return (
    <section className="hero dotgrid-theme" id="top">
      <div className="hero-glow"></div>
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <Reveal as="h1" delay={60} className="hero-h1">
            Excel wire list in.<br />Harness diagram out. <span className="accent">60&nbsp;seconds.</span>
          </Reveal>
          <Reveal delay={120}>
            <p className="lede hero-lede">Tractus turns your existing wire list into a production-ready harness diagram — without touching your format, your tools, or your process.</p>
          </Reveal>
          <Reveal delay={180} className="hero-cta">
            <a className="btn" href="#try">Try it out <span className="arr" aria-hidden="true">→</span></a>
            <span className="hero-secure"><span className="dot"></span>Runs locally. Your data never leaves your environment.</span>
          </Reveal>
        </div>
        <Reveal delay={120} className="hero-demo">
          {HarnessDemo ? <HarnessDemo /> : null}
        </Reveal>
      </div>
      <style>{`
        .hero { background: var(--paper); color: var(--ink); padding: 58px 0 96px; overflow: hidden; }
        .hero-glow { position: absolute; top: -180px; right: -120px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,65,54,.14), transparent 62%); opacity: var(--glow-opacity); pointer-events: none; }
        .hero-inner { position: relative; }
        .hero-copy { max-width: 820px; }
        .hero-h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.03; letter-spacing: -.03em; margin: 6px 0 0; }
        .hero-h1 .accent { color: var(--accent); }
        .hero-lede { color: var(--ink-mut); font-size: clamp(17px, 2vw, 21px); margin: 24px 0 0; max-width: 60ch; }
        .hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; }
        .hero-secure { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); letter-spacing: .01em; }
        .hero-secure .dot { width: 7px; height: 7px; background: #2bb673; border-radius: 50%; box-shadow: 0 0 8px #2bb67388; flex: none; }
        .hero-demo { margin-top: 58px; }
      `}</style>
    </section>);

}

function PainCard({ n, lead, rest, delay }) {
  return (
    <Reveal className="pain-card" delay={delay}>
      <div className="pain-top"><span className="pain-n">{n}</span><span className="pain-tick"></span></div>
      <p className="pain-text"><strong>{lead}</strong>{rest}</p>
    </Reveal>);

}

function Pain() {
  return (
    <section className="pain" id="pain">
      <div className="wrap">
        <Reveal as="h2" className="section-title pain-title" delay={60}>Sound familiar?</Reveal>
        <div className="pain-grid">
          <PainCard n="01" delay={0} lead="Several hours, by hand. " rest="Your harness engineer draws diagrams manually — every single harness, every revision." />
          <PainCard n="02" delay={90} lead="Errors surface at final assembly. " rest="By then, rework costs a week — and someone has to explain it to the customer." />
          <PainCard n="03" delay={180} lead="$6,000–$13,000 per seat, per year. " rest="Enterprise tools demand a full database migration. Excel is still faster." />
        </div>
      </div>
      <style>{`
        .pain { background: var(--paper-2); padding: var(--sp-section) 0; }
        .pain-title { margin: 18px 0 52px; }
        .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .pain-card { background: var(--paper-card); border: 1px solid var(--line); padding: 30px 28px 34px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
        .pain-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--panel-shadow); }
        .pain-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
        .pain-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .1em; }
        .pain-tick { width: 28px; height: 4px; background: var(--ink); }
        .pain-card:hover .pain-tick { background: var(--accent); }
        .pain-text { font-size: 18px; line-height: 1.55; color: var(--ink-mut); margin: 0; text-wrap: pretty; }
        .pain-text strong { color: var(--ink); font-weight: 700; }
        @media (max-width: 820px) { .pain-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>);

}

function HowItWorks() {
  const steps = [
  ["01", "Drop in your Excel wire list", "Any format — no template required. Use the file you already have."],
  ["02", "We map your columns, once", "We map your Excel wire list to Tractus — set it and forget it."],
  ["03", "Generate the diagram", "A complete harness diagram in under 60 seconds — every time, every revision."]];

  return (
    <section className="how" id="how">
      <div className="wrap">
        <Reveal as="h2" className="section-title how-title" delay={60}>Three steps. No new process.</Reveal>
        <div className="how-grid">
          <div className="how-line" aria-hidden="true"></div>
          {steps.map(([n, t, d], i) =>
          <Reveal className="how-step" key={n} delay={i * 110}>
              <div className="how-n">{n}</div>
              <h3 className="how-step-title">{t}</h3>
              <p className="how-step-desc">{d}</p>
            </Reveal>
          )}
        </div>

      </div>
      <style>{`
        .how { background: var(--paper); color: var(--ink); padding: var(--sp-section) 0; }
        .how-title { margin: 18px 0 64px; color: var(--ink); }
        .how-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
        .how-line { position: absolute; top: 26px; left: 6%; right: 6%; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px); }
        .how-step { position: relative; }
        .how-n { width: 54px; height: 54px; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 18px; color: var(--accent); background: var(--paper); border: 1.5px solid var(--accent); margin-bottom: 26px; }
        .how-step-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
        .how-step-desc { color: var(--ink-mut); font-size: 16px; line-height: 1.6; max-width: 32ch; text-wrap: pretty; }

        @media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; gap: 40px; } .how-line { display: none; } }
      `}</style>
    </section>);

}

Object.assign(window, { Reveal, CALENDLY, Nav, Hero, Pain, HowItWorks, Wordmark, ThemeToggle });