// sections.jsx — Reusable site sections + content

const SERVICES = [
  { n: '01', id: 'strategy.sprint', t: 'AI Strategy & Roadmapping',
    d: 'Translate ambition into a sequenced plan with named owners, KPIs and a 90-day first win.',
    tags: ['Workshops', 'Roadmap', 'KPIs'], deliverable: '90-day plan + governance model' },
  { n: '02', id: 'readiness.assess', t: 'AI Readiness Assessment',
    d: 'A structured audit of strategy, data, talent, deployment and governance — with a written, defensible report.',
    tags: ['Audit', 'Eval', 'Report'], deliverable: 'Written report + remediation plan' },
  { n: '03', id: 'fractional.lead', t: 'Fractional AI Leadership',
    d: 'Embedded VP/Chief-AI presence one to three days a week. Hire the team, set the bar, deliver the work.',
    tags: ['Embedded', '1–3 days/wk', 'Hiring'], deliverable: 'On your org chart in 2 weeks' },
  { n: '04', id: 'rag.pipeline', t: 'RAG & Knowledge Systems',
    d: 'Production-grade retrieval over your contracts, tickets, docs and code — with eval harnesses, not vibes.',
    tags: ['Retrieval', 'Vector DB', 'Evals'], deliverable: 'Production RAG + test suite' },
  { n: '05', id: 'agents.custom', t: 'Custom LLM & Agent Development',
    d: 'Multi-step agents that take real actions in your systems. Built for reliability, observability and rollback.',
    tags: ['Agents', 'Tool-use', 'Observability'], deliverable: 'Live agent + eval harness' },
  { n: '06', id: 'workflow.auto', t: 'Workflow Automation',
    d: 'Identify the highest-friction operational loops and replace them with AI-augmented workflows that scale.',
    tags: ['Process', 'LLM', 'Integration'], deliverable: 'End-to-end workflow in production' },
  { n: '07', id: 'data.mlops', t: 'Data Infrastructure & MLOps',
    d: 'The unglamorous foundations: clean pipelines, evals, observability, cost controls and a CI for prompts.',
    tags: ['Pipelines', 'Cost', 'Prompt CI'], deliverable: 'Production-grade ML platform' },
];

function LogoMark({ kind = 'ring', accent, inFooter = false }) {
  if (kind === 'spark') {
    return (
      <svg className="logo-mark-svg" viewBox="0 0 18 18" width="18" height="18" aria-hidden="true">
        <path d="M9 0.5 L10.4 6.8 L16.8 8.2 L10.7 9.3 L9 17.5 L7.3 9.3 L1.2 8.2 L7.6 6.8 Z"
              fill={accent} />
      </svg>
    );
  }
  if (kind === 'matrix') {
    return (
      <svg className="logo-mark-svg" viewBox="0 0 18 18" width="18" height="18" aria-hidden="true">
        <rect x="0" y="0" width="7.5" height="7.5" fill={accent} />
        <rect x="10.5" y="0" width="7.5" height="7.5" fill={accent} opacity="0.3" />
        <rect x="0" y="10.5" width="7.5" height="7.5" fill={accent} opacity="0.3" />
        <rect x="10.5" y="10.5" width="7.5" height="7.5" fill={accent} />
      </svg>
    );
  }
  // ring (default)
  return (
    <span className={inFooter ? 'logo-mark logo-mark-footer' : 'logo-mark'}
          style={{ background: accent }} />
  );
}

function Nav({ accent, mark = 'ring' }) {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="nav" data-screen-label="Nav">
      <a href="#top" className="logo">
        <LogoMark kind={mark} accent={accent} />
        <span className="logo-word">incetna</span>
      </a>
      <div className={'nav-links' + (open ? ' open' : '')}>
        <a href="#services" onClick={() => setOpen(false)}>Services</a>
        <a href="#approach" onClick={() => setOpen(false)}>Approach</a>
        <a href="#about" onClick={() => setOpen(false)}>About</a>
        <a href="#quiz" onClick={() => setOpen(false)}>Readiness Quiz</a>
        <a href="#faq" onClick={() => setOpen(false)}>FAQ</a>
      </div>
      <a href="#contact" className="nav-cta">Book a call →</a>
      <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(!open)}>
        <span /><span /><span />
      </button>
    </nav>
  );
}

function Hero({ accent, density }) {
  return (
    <header className="hero" id="top" data-screen-label="Hero">
      <HeroCanvas accent={accent} ink="#0f1417" density={density} />
      <div className="hero-inner">
        <div className="hero-eyebrow">
          <span className="dot" style={{ background: accent }} />
          <span>Incetna · AI consulting & transformation</span>
        </div>
        <h1 className="hero-title">
          We turn AI ambition<br />
          into <em>delivered,</em><br />
          measurable advantage.
        </h1>
        <p className="hero-sub">
          Incetna is an AI consulting firm of operators — former CTOs, CPOs and
          transformation leaders. We help enterprise, mid-market and founder teams
          move from AI strategy to production systems that actually compound.
        </p>
        <div className="hero-ctas">
          <a href="#contact" className="btn btn-primary">Book a discovery call</a>
          <a href="#quiz" className="btn btn-ghost">Take the 2-min readiness quiz →</a>
        </div>
        <div className="hero-meta">
          <span>Financial services</span>
          <span className="sep">·</span>
          <span>Healthcare</span>
          <span className="sep">·</span>
          <span>SaaS</span>
          <span className="sep">·</span>
          <span>Manufacturing</span>
          <span className="sep">·</span>
          <span>Public sector</span>
        </div>
      </div>
      <div className="hero-scroll">scroll<span /></div>
    </header>
  );
}

function Services({ accent, layout = 'list' }) {
  const [hover, setHover] = React.useState(null);
  return (
    <section className="section services" id="services" data-screen-label="Services">
      <div className="section-head">
        <div className="eyebrow"><span>01</span> Services</div>
        <h2 className="section-title">Seven engagements. One throughline: <em>delivered outcomes.</em></h2>
        <p className="section-lede">
          Pick a single piece or run them end-to-end. Each engagement is bounded, priced
          and produces an artifact you can show your board on Monday.
        </p>
      </div>
      {layout === 'cards' ? (
        <div className="service-cards">
          {SERVICES.map((s) => (
            <article key={s.n} className="service-card">
              <header className="service-card-head">
                <span className="service-card-id">
                  <span className="muted">incetna/</span>{s.id}
                </span>
                <span className="service-card-num">{s.n}</span>
              </header>
              <h3 className="service-card-t">{s.t}</h3>
              <p className="service-card-d">{s.d}</p>
              <ul className="service-card-tags">
                {s.tags.map(tag => <li key={tag}>{tag}</li>)}
              </ul>
              <footer className="service-card-foot">
                <div>
                  <div className="service-card-label">Deliverable</div>
                  <div className="service-card-deliv">{s.deliverable}</div>
                </div>
                <span className="service-card-arrow" style={{ color: accent }}>→</span>
              </footer>
            </article>
          ))}
        </div>
      ) : (
        <ol className="service-list" onMouseLeave={() => setHover(null)}>
          {SERVICES.map((s, i) => (
            <li key={s.n}
                className={'service' + (hover === i ? ' is-hover' : '')}
                onMouseEnter={() => setHover(i)}>
              <span className="service-n">{s.n}</span>
              <div className="service-body">
                <h3 className="service-t">{s.t}</h3>
                <p className="service-d">{s.d}</p>
              </div>
              <span className="service-arrow" style={{ color: accent }}>→</span>
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}

function Approach({ accent }) {
  const steps = [
    { n: 'Wk 1', t: 'Discovery', d: 'Half-day working session with leadership. Map the real constraints, not the org chart.' },
    { n: 'Wk 2', t: 'Diagnosis', d: 'Written readiness report. Honest about what is missing, what is wasted, what is ready.' },
    { n: 'Wk 3–6', t: 'First Win', d: 'One bounded, end-to-end use case. Live with users by week six. Eval harness on day one.' },
    { n: 'Ongoing', t: 'Compound', d: 'Roll the playbook into a second, third, nth use case. Build the team to take it forward.' },
  ];
  return (
    <section className="section approach" id="approach" data-screen-label="Approach">
      <div className="section-head">
        <div className="eyebrow"><span>02</span> Approach</div>
        <h2 className="section-title">A 90-day path from <em>talking about AI</em> to <em>shipping it.</em></h2>
        <p className="section-lede">
          Most AI initiatives die in PowerPoint. The fix is structural: small scope, real users,
          honest evals, and a leader on the hook for the outcome.
        </p>
      </div>
      <div className="steps">
        {steps.map((s, i) => (
          <div key={i} className="step">
            <div className="step-rail">
              <span className="step-dot" style={{ background: accent }} />
              {i < steps.length - 1 && <span className="step-line" />}
            </div>
            <div className="step-body">
              <div className="step-when">{s.n}</div>
              <div className="step-t">{s.t}</div>
              <p className="step-d">{s.d}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

const FOCUS = [
  'Strategy', 'Roadmaps', 'Readiness', 'Operating model', 'Governance', 'Change enablement',
];

function About() {
  return (
    <section className="section about" id="about" data-screen-label="About">
      <div className="about-head">
        <div className="eyebrow"><span>03</span> About Incetna</div>
        <h2 className="section-title">AI transformation, <em>made concrete.</em></h2>
        <p className="about-lede">
          Incetna helps leadership teams turn AI ambition into a defensible plan —
          and into measurable change in the business. We start with strategy,
          readiness, and the operating-model decisions that determine whether AI
          lands. And we work alongside your people to build an AI-first mindset
          that outlasts the engagement. Hands-on implementation grows from there,
          as your roadmap demands it.
        </p>
      </div>

      <div className="stack-strip">
        <div className="stack-label">Where we focus today</div>
        <ul className="stack-list">
          {FOCUS.map((s, i) => <li key={i}>{s}</li>)}
        </ul>
      </div>
    </section>
  );
}

function QuizSection({ accent }) {
  return (
    <section className="section quiz-section" id="quiz" data-screen-label="Quiz">
      <div className="section-head section-head-center">
        <div className="eyebrow"><span>04</span> Readiness Quiz</div>
        <h2 className="section-title">Where does your org actually stand?</h2>
        <p className="section-lede">
          Six questions, two minutes. You get a scored readiness band, a per-dimension
          breakdown, and a concrete next engagement.
        </p>
      </div>
      <ReadinessQuiz accent={accent} />
    </section>
  );
}

const FAQS = [
  { q: 'How do you price engagements?', a: 'Three modes. Fixed-scope projects (strategy sprint, readiness assessment) are flat-fee. Fractional leadership is a monthly retainer for one to three days a week. Custom builds are scoped per project. No hourly billing — you should know the number on the contract.' },
  { q: 'What size companies do you work with?', a: 'Seed-stage founders through global enterprise. The work changes shape — a startup needs a first agent delivered, an enterprise needs the politics navigated — but the throughline is the same: clarity, delivery, evidence.' },
  { q: 'Do you build, or just advise?', a: 'Both, depending on what you need. Our team delivers production AI systems alongside your engineers and runs executive workshops for leadership. Most engagements involve some of each.' },
  { q: 'What about responsible AI and compliance?', a: 'Treated as a first-class concern, not a slide. Every engagement includes a written assessment of risk, data handling and policy gaps — and a remediation plan if needed.' },
  { q: 'Where are you based?', a: 'Remote-first, with partners across US, EU and APAC timezones. We travel onsite for working sessions when it meaningfully accelerates the work.' },
  { q: 'How do we start?', a: 'A 30-minute discovery call with a partner. No deck, no pitch. We map the real problem and decide together whether an engagement makes sense.' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq" id="faq" data-screen-label="FAQ">
      <div className="faq-grid">
        <div className="section-head">
          <div className="eyebrow"><span>05</span> FAQ</div>
          <h2 className="section-title">The questions everyone asks first.</h2>
          <p className="section-lede">If yours isn't here, ask it on the discovery call.</p>
        </div>
        <ul className="faq-list">
          {FAQS.map((f, i) => (
            <li key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle" aria-hidden="true">{open === i ? '–' : '+'}</span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? '500px' : '0' }}>
                <p>{f.a}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Contact({ accent }) {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({ name: '', email: '', company: '', goal: 'Strategy', message: '' });
  const update = (k, v) => setForm({ ...form, [k]: v });
  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    setSending(true);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const { error } = await res.json().catch(() => ({ error: 'Send failed.' }));
        throw new Error(error || 'Send failed.');
      }
      setSent(true);
    } catch (err) {
      setError(err.message || 'Could not send. Please email transform@incetna.com directly.');
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section contact" id="contact" data-screen-label="Contact">
      <div className="contact-grid">
        <div className="contact-left">
          <div className="eyebrow"><span>06</span> Get started</div>
          <h2 className="section-title">Talk to a partner. 30 minutes, no deck.</h2>
          <p className="contact-lede">
            You map the real problem with a partner who has delivered it before. If an
            engagement makes sense, we'll scope it together. If it doesn't, you leave
            with a sharper question.
          </p>
          <ul className="contact-list">
            <li><span className="muted">Email</span><span>transform@incetna.com</span></li>
            <li><span className="muted">Response</span><span>Within one business day</span></li>
            <li><span className="muted">Discovery call</span><span>30 min · free · zoom</span></li>
          </ul>
        </div>
        <div className="contact-right">
          {sent ? (
            <div className="contact-thanks">
              <div className="contact-check" style={{ borderColor: accent, color: accent }}>✓</div>
              <h3>You're on the calendar.</h3>
              <p>You'll get a calendar invite at <strong>{form.email || 'your email'}</strong> within one business day. Talk soon.</p>
              <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name:'', email:'', company:'', goal:'Strategy', message:'' }); }}>Send another →</button>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit}>
              <label className="field">
                <span>Your name</span>
                <input required value={form.name} onChange={e => update('name', e.target.value)} placeholder="Jane Cohen" />
              </label>
              <label className="field">
                <span>Work email</span>
                <input required type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="jane@company.com" />
              </label>
              <label className="field">
                <span>Company</span>
                <input value={form.company} onChange={e => update('company', e.target.value)} placeholder="Company name" />
              </label>
              <label className="field">
                <span>What are you trying to do?</span>
                <div className="chips">
                  {['Strategy', 'Readiness', 'Build', 'Fractional', 'Other'].map(g => (
                    <button type="button" key={g}
                            className={'chip' + (form.goal === g ? ' on' : '')}
                            style={form.goal === g ? { background: accent, borderColor: accent, color: '#fff' } : null}
                            onClick={() => update('goal', g)}>{g}</button>
                  ))}
                </div>
              </label>
              <label className="field">
                <span>Anything else? (optional)</span>
                <textarea rows="3" value={form.message} onChange={e => update('message', e.target.value)} placeholder="Where are you stuck, what does success look like…" />
              </label>
              <button type="submit" className="btn btn-primary btn-full" disabled={sending}>
                {sending ? 'Sending…' : 'Request a discovery call →'}
              </button>
              {error && <p className="contact-error">{error}</p>}
              <p className="contact-fine">No mailing list. No follow-ups unless we agree to.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer({ accent, mark = 'ring' }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="footer-mark">
            <LogoMark kind={mark} accent={accent} inFooter />
            <span className="logo-word">incetna</span>
          </div>
          <p>AI consulting and transformation, run by an operator. From strategy to delivered systems.</p>
        </div>
        <div className="footer-cols">
          <div>
            <div className="footer-h">Services</div>
            <a href="#services">Strategy</a>
            <a href="#services">Readiness</a>
            <a href="#services">Fractional</a>
            <a href="#services">Custom build</a>
          </div>
          <div>
            <div className="footer-h">Company</div>
            <a href="#about">About</a>
            <a href="#approach">Approach</a>
            <a href="#faq">FAQ</a>
            <a href="#contact">Contact</a>
          </div>
          <div>
            <div className="footer-h">Elsewhere</div>
            <a href="#">LinkedIn</a>
            <a href="#">Writing</a>
            <a href="#">Substack</a>
          </div>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 Incetna</span>
        <span>incetna.com</span>
      </div>
    </footer>
  );
}

Object.assign(window, { LogoMark, Nav, Hero, Services, Approach, About, QuizSection, FAQ, Contact, Footer });