// EpochCore — landing page sections + app shell.
// Aesthetic: specimen sheet. IBM Plex family. Strict grid, mono labels, serif accents.

// ── Layout helpers ─────────────────────────────────────────────
const WRAP_STYLE = { maxWidth: 1240, margin: '0 auto', padding: '0 32px' };

function Wrap({ children, style = {} }) {
  return <div style={{ ...WRAP_STYLE, ...style }}>{children}</div>;
}

// Section frame with consistent vertical rhythm and an optional sticky number rail
function Section({ id, num, title, eyebrow, intro, children, dark = false }) {
  const bg = dark ? TOKEN.ink : TOKEN.paper;
  const fg = dark ? TOKEN.paper : TOKEN.ink;
  const sectionStyles = {
    pad: { padding: '120px 0', background: bg, color: fg, position: 'relative' },
    head: { display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, marginBottom: 56 },
  };
  return (
    <section id={id} style={sectionStyles.pad}>
      <Wrap>
        <div style={sectionStyles.head}>
          <div>
            <SectionLabel num={num} accent={TOKEN.orange} color={fg}>{eyebrow}</SectionLabel>
            <h2 style={{
              fontFamily: '"IBM Plex Sans", system-ui, sans-serif',
              fontWeight: 600, fontSize: 44, letterSpacing: -1.4, lineHeight: 1.08,
              margin: '20px 0 0', color: fg, maxWidth: 420,
            }}>{title}</h2>
          </div>
          {intro && (
            <div style={{
              fontSize: 18, lineHeight: 1.55, color: dark ? 'rgba(250,250,247,0.7)' : TOKEN.mute,
              letterSpacing: -0.2, maxWidth: 560, paddingTop: 28,
              fontFamily: '"IBM Plex Sans", system-ui, sans-serif',
            }}>{intro}</div>
          )}
        </div>
        {children}
      </Wrap>
    </section>
  );
}

// ── Top status bar (ticker-style) ──────────────────────────────
function TopBar() {
  return (
    <div style={{
      background: TOKEN.ink, color: TOKEN.paper,
      borderBottom: `1px solid rgba(250,250,247,0.08)`,
      padding: '8px 0', overflow: 'hidden',
    }}>
      <Wrap style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <a href="Portfolio.html" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <Mono color={TOKEN.paper} size={10} style={{ opacity: 0.6 }}>← EPOCHCORE</Mono>
          <span style={{ width: 1, height: 9, background: 'rgba(250,250,247,0.18)' }}/>
          <Mono color={TOKEN.paper} size={10} style={{ opacity: 0.6 }}>AI AGENT IN A BOX · §01</Mono>
        </a>
        <Mono color={TOKEN.paper} size={10} style={{ opacity: 0.6, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: TOKEN.green, boxShadow: `0 0 0 3px rgba(31,138,91,0.25)` }}/>
          ACCEPTING CLIENTS · MON–FRI 9–2 / 4–7 ET
        </Mono>
      </Wrap>
    </div>
  );
}

// ── Sticky main nav ────────────────────────────────────────────
function Nav() {
  const navStyles = {
    bar: {
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(250,250,247,0.85)',
      backdropFilter: 'saturate(180%) blur(16px)',
      WebkitBackdropFilter: 'saturate(180%) blur(16px)',
      borderBottom: `1px solid ${TOKEN.hair}`,
    },
    row: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 },
    links: { display: 'flex', gap: 28, fontFamily: '"IBM Plex Mono", monospace', fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', color: TOKEN.inkSoft },
  };
  const items = [
    { n: '01', label: 'Capabilities', href: '#capabilities' },
    { n: '02', label: 'Try it', href: '#try-it' },
    { n: '03', label: 'Channels', href: '#channels' },
    { n: '04', label: 'Dashboard', href: '#dashboard' },
    { n: '05', label: 'Pricing', href: '#pricing' },
  ];
  return (
    <nav style={navStyles.bar}>
      <Wrap style={navStyles.row}>
        <a href="#top" style={{ textDecoration: 'none' }}><Wordmark size={16}/></a>
        <div style={navStyles.links}>
          {items.map(it => (
            <a key={it.n} href={it.href} style={{ textDecoration: 'none', color: 'inherit', display: 'inline-flex', gap: 8, alignItems: 'center' }}>
              <span style={{ color: TOKEN.orange }}>{it.n}</span>
              <span>{it.label}</span>
            </a>
          ))}
        </div>
        <a href="#engage" style={{ textDecoration: 'none' }}>
          <ECButton variant="orange" size="md">Book discovery</ECButton>
        </a>
      </Wrap>
    </nav>
  );
}

// ── Hero ───────────────────────────────────────────────────────
function Hero({ tweaks }) {
  const heroStyles = {
    sec: {
      padding: '64px 0 96px', position: 'relative', overflow: 'hidden',
      background:
        `radial-gradient(900px 600px at 100% 0%, rgba(27,75,255,0.05), transparent 60%),` +
        `radial-gradient(700px 500px at 0% 100%, rgba(255,106,26,0.04), transparent 60%)`,
    },
    grid: {
      display: 'grid', gridTemplateColumns: '1.1fr 0.95fr', gap: 64, alignItems: 'start',
    },
    eyebrowRow: { display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 },
    h1: {
      fontFamily: '"IBM Plex Sans", system-ui, sans-serif',
      fontSize: 'clamp(48px, 6.5vw, 88px)', fontWeight: 600, lineHeight: 0.98,
      letterSpacing: -3, margin: 0, color: TOKEN.ink,
    },
    accent: {
      fontFamily: '"IBM Plex Serif", Georgia, serif', fontStyle: 'italic',
      fontWeight: 400, color: TOKEN.orange, position: 'relative',
    },
    sub: {
      marginTop: 28, fontSize: 18, lineHeight: 1.55, color: TOKEN.mute,
      letterSpacing: -0.2, maxWidth: 480,
      fontFamily: '"IBM Plex Sans", system-ui, sans-serif',
    },
    cta: { display: 'flex', gap: 12, marginTop: 36 },
    spec: {
      marginTop: 48, padding: '20px 0', borderTop: `1px solid ${TOKEN.hair}`, borderBottom: `1px solid ${TOKEN.hair}`,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
    },
    specCell: { padding: '0 18px', borderLeft: `1px solid ${TOKEN.hair}` },
  };
  const fmt = (n) => `$${Number(n).toLocaleString('en-US')}`;
  const specs = [
    { k: 'TRIAL', v: `${tweaks.trialWeeks} weeks free`, sub: 'no card, no commitment' },
    { k: 'INSTALL', v: fmt(tweaks.installPrice), sub: 'only if you keep it' },
    { k: 'THEN', v: `${fmt(tweaks.monthlyPrice)}/mo`, sub: `or ${fmt(tweaks.annualPrice)}/yr` },
    { k: 'INCLUDED', v: 'Unlimited', sub: 'no token limits' },
  ];

  return (
    <section id="top" style={heroStyles.sec}>
      <Wrap>
        <div style={heroStyles.grid}>
          <div>
            <div style={heroStyles.eyebrowRow}>
              <Bracket>NEW · 2025</Bracket>
              <Mono>AI agent · in a box · for SMBs</Mono>
            </div>

            <h1 style={heroStyles.h1}>
              Stop missing leads.<br/>
              Try your AI agent<br/>
              free for<br/>
              <span style={heroStyles.accent}>
                two&nbsp;weeks.
                <svg width="100%" height="14" viewBox="0 0 400 14" preserveAspectRatio="none"
                  style={{ position: 'absolute', left: 0, bottom: -6, height: 12, color: TOKEN.orange }}>
                  <path d="M2 8 C 80 2, 200 12, 398 6" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                </svg>
              </span>
            </h1>

            <p style={heroStyles.sub}>
              EpochCore builds, deploys, and tunes a customer-facing AI agent for your business — on the web, by text, or by email. Run it free for {tweaks.trialWeeks} weeks. If you keep it, install is {fmt(tweaks.installPrice)} — then {fmt(tweaks.monthlyPrice)}/mo or {fmt(tweaks.annualPrice)}/yr. No hidden fees. No token limits.
            </p>

            <div style={heroStyles.cta}>
              <a href="#engage" style={{ textDecoration: 'none' }}>
                <ECButton variant="orange" size="lg">Start free discovery</ECButton>
              </a>
              <a href="#pricing" style={{ textDecoration: 'none' }}>
                <ECButton variant="ghost" size="lg" icon={false}>See pricing</ECButton>
              </a>
            </div>

            <div style={heroStyles.spec}>
              {specs.map((s, i) => (
                <div key={s.k} style={{ ...heroStyles.specCell, borderLeft: i === 0 ? 'none' : heroStyles.specCell.borderLeft, paddingLeft: i === 0 ? 0 : 18 }}>
                  <Mono color={TOKEN.orange} size={10}>{s.k}</Mono>
                  <div style={{
                    fontFamily: '"IBM Plex Sans"', fontSize: 20, fontWeight: 600,
                    letterSpacing: -0.6, color: TOKEN.ink, marginTop: 6,
                  }}>{s.v}</div>
                  <div style={{ fontSize: 12, color: TOKEN.mute, marginTop: 2, letterSpacing: -0.1 }}>{s.sub}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Live demo column */}
          <div style={{ position: 'relative', paddingTop: 8 }}>
            <div style={{ marginBottom: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <Mono color={TOKEN.ink} weight={600}>FIG · 01 — live agent, three businesses</Mono>
              <Mono color={TOKEN.mute}>Auto-rotating · click to switch</Mono>
            </div>
            <LiveAgentDemo/>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

// ── §01 Capabilities ───────────────────────────────────────────
function Capabilities() {
  const caps = [
    { n: '01', t: 'Branded to your business', d: 'Your name, voice, and tone. Not "Hi I\'m EpochBot."', meta: 'Persona + guardrails' },
    { n: '02', t: 'On every channel that matters', d: 'Website chat, SMS via Twilio, or email autoresponder. One agent, many doors.', meta: 'Web · SMS · Email' },
    { n: '03', t: 'Hand off when it matters', d: 'When a prospect is ready to buy, the agent passes them to a human via HubSpot, Pipedrive, Salesforce, or Sheets.', meta: 'CRM-aware' },
    { n: '04', t: 'Tuned every week', d: 'We review transcripts and adjust prompts. The agent gets smarter — you don\'t lift a finger.', meta: '30-day post-launch' },
  ];
  return (
    <Section id="capabilities" num="01" eyebrow="Capabilities"
      title="An agent that answers, captures, and hands off."
      intro="Not a chatbot. Not a script. A working agent trained on your business, with a clear path to a human when it matters.">
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
        borderTop: `1px solid ${TOKEN.hair}`, borderLeft: `1px solid ${TOKEN.hair}`,
      }}>
        {caps.map(c => (
          <div key={c.n} style={{
            padding: '32px 32px 36px', borderRight: `1px solid ${TOKEN.hair}`,
            borderBottom: `1px solid ${TOKEN.hair}`, position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <Mono color={TOKEN.orange} weight={600} size={12}>§01.{c.n}</Mono>
              <Mono color={TOKEN.mute}>{c.meta}</Mono>
            </div>
            <h3 style={{
              fontFamily: '"IBM Plex Sans"', fontSize: 22, fontWeight: 600,
              letterSpacing: -0.6, lineHeight: 1.2, margin: 0, color: TOKEN.ink,
            }}>{c.t}</h3>
            <p style={{
              fontSize: 15, lineHeight: 1.55, color: TOKEN.mute, letterSpacing: -0.1,
              marginTop: 10, maxWidth: 440,
            }}>{c.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ── §02 Channels demo ──────────────────────────────────────────
function Channels() {
  return (
    <Section id="channels" num="03" eyebrow="Channels"
      title="One agent. Three doors."
      intro="The agent's brain stays the same; only the chrome adapts. Launch with one channel on Starter, two on Growth, all three on Operator.">
      <ChannelDemo/>
    </Section>
  );
}

// ── §03 Timeline ───────────────────────────────────────────────
function Timeline() {
  const steps = [
    { wk: 'WEEK 01', t: 'Discovery & ingestion', d: '90-min workshop maps your top 20 customer questions and qualification criteria. We ingest FAQs, service pages, and pricing.', deliv: ['Persona doc', 'Knowledge base v1', 'Guardrails'] },
    { wk: 'WEEK 02', t: 'QA & go-live', d: 'Internal QA with your team. Deploy to the chosen channel. CRM handoff wired. Conversation logs flowing into your dashboard.', deliv: ['Live agent', 'Dashboard', 'Runbook'] },
    { wk: 'WEEKS 03–06', t: 'Tune & review', d: 'Weekly transcript review and tuning calls. We adjust prompts, add edge-case handling, tighten qualification.', deliv: ['Weekly notes', 'Prompt diffs', 'Handoff doc'] },
  ];
  return (
    <Section id="timeline" num="07" eyebrow="Timeline" dark
      title="From signed SOW to live agent in fourteen days."
      intro="No vague Phase 1 / Phase 2 fog. Here is what happens, by week — and exactly what you receive at the end of each.">
      <div style={{ position: 'relative' }}>
        {/* timeline rail */}
        <div style={{
          position: 'absolute', top: 14, left: 0, right: 0, height: 1,
          background: 'rgba(250,250,247,0.16)',
        }}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {steps.map((s, i) => (
            <div key={s.wk} style={{ position: 'relative', paddingTop: 36 }}>
              <div style={{
                position: 'absolute', top: 9, left: 0,
                width: 11, height: 11, background: i === 0 ? TOKEN.orange : TOKEN.paper,
                border: i === 0 ? 'none' : `2px solid ${TOKEN.orange}`,
              }}/>
              <Mono color={TOKEN.orange} weight={600}>{s.wk}</Mono>
              <h3 style={{
                fontFamily: '"IBM Plex Sans"', fontSize: 24, fontWeight: 500,
                letterSpacing: -0.6, color: TOKEN.paper, margin: '12px 0 12px',
              }}>{s.t}</h3>
              <p style={{
                fontSize: 14.5, lineHeight: 1.55, color: 'rgba(250,250,247,0.65)',
                letterSpacing: -0.1, margin: '0 0 20px', maxWidth: 320,
              }}>{s.d}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {s.deliv.map(d => (
                  <div key={d} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 14, height: 1, background: TOKEN.orange }}/>
                    <Mono color="rgba(250,250,247,0.7)">{d}</Mono>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ── §04 Pricing ────────────────────────────────────────────────
function Pricing({ tweaks }) {
  const [billing, setBilling] = React.useState(tweaks.defaultBilling || 'annual');
  React.useEffect(() => { setBilling(tweaks.defaultBilling || 'annual'); }, [tweaks.defaultBilling]);

  const fmt = (n) => `$${Number(n).toLocaleString('en-US')}`;
  const monthly = tweaks.monthlyPrice;
  const annual = tweaks.annualPrice;
  const install = tweaks.installPrice;
  const yearOfMonthly = monthly * 12;
  const savings = yearOfMonthly - annual;
  const savingsPct = Math.round((savings / yearOfMonthly) * 100);

  const isAnnual = billing === 'annual';
  const subPrice = isAnnual ? annual : monthly;
  const subUnit  = isAnnual ? '/ year' : '/ month';

  // — Trial banner ribbon
  const ribbon = tweaks.showTrialRibbon && (
    <div style={{
      background: TOKEN.ink, color: TOKEN.paper, padding: '20px 28px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      border: `1px solid ${TOKEN.ink}`, marginBottom: 16, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,106,26,0.06) 14px 15px)`,
      }}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 22, position: 'relative' }}>
        <div style={{
          fontFamily: '"IBM Plex Serif", Georgia, serif', fontStyle: 'italic',
          fontWeight: 400, fontSize: 60, letterSpacing: -2, lineHeight: 1, color: TOKEN.orange,
        }}>{tweaks.trialWeeks}</div>
        <div>
          <Mono color={TOKEN.orange} weight={600}>FREE TRIAL · NO CARD</Mono>
          <div style={{
            fontFamily: '"IBM Plex Sans"', fontSize: 22, fontWeight: 500,
            letterSpacing: -0.5, color: TOKEN.paper, marginTop: 6,
          }}>{tweaks.trialWeeks} weeks. Live agent. Your real customers. Walk away anytime.</div>
        </div>
      </div>
      <div style={{ textAlign: 'right', position: 'relative' }}>
        <Mono color="rgba(250,250,247,0.5)">ONLY IF YOU KEEP IT</Mono>
        <div style={{
          fontFamily: '"IBM Plex Sans"', fontSize: 32, fontWeight: 600,
          letterSpacing: -1, color: TOKEN.paper, marginTop: 4,
        }}>{fmt(install)} <span style={{ fontSize: 14, opacity: 0.6, letterSpacing: -0.1, fontWeight: 400 }}>one-time install</span></div>
      </div>
    </div>
  );

  // — Billing toggle
  const toggle = (
    <div style={{
      display: 'inline-flex', padding: 4, background: TOKEN.paperDeep,
      border: `1px solid ${TOKEN.hair}`, gap: 0,
    }}>
      {[
        { id: 'monthly', label: 'Monthly' },
        { id: 'annual',  label: `Annual · save ${fmt(savings)}` },
      ].map(opt => {
        const active = billing === opt.id;
        return (
          <button key={opt.id} onClick={() => setBilling(opt.id)}
            style={{
              border: 'none', cursor: 'pointer',
              background: active ? TOKEN.ink : 'transparent',
              color: active ? TOKEN.paper : TOKEN.inkSoft,
              fontFamily: '"IBM Plex Mono", monospace', fontSize: 11,
              letterSpacing: 1, textTransform: 'uppercase',
              padding: '10px 18px', transition: 'all .18s ease',
            }}>{opt.label}</button>
        );
      })}
    </div>
  );

  // — Big plan card
  const planCard = (
    <div style={{
      background: TOKEN.paper, border: `1px solid ${TOKEN.hair}`,
      padding: '36px 36px 32px', position: 'relative',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'start',
    }}>
      <CornerMark where="tl" color={TOKEN.hairBold}/>
      <CornerMark where="tr" color={TOKEN.hairBold}/>
      <CornerMark where="bl" color={TOKEN.hairBold}/>
      <CornerMark where="br" color={TOKEN.hairBold}/>

      <div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
          <Mono color={TOKEN.orange} weight={600}>AFTER THE TRIAL</Mono>
          <Mono color={TOKEN.mute}>§05.01</Mono>
        </div>
        <div style={{
          fontFamily: '"IBM Plex Serif", Georgia, serif', fontStyle: 'italic',
          fontWeight: 400, fontSize: 32, letterSpacing: -0.8, marginBottom: 8, color: TOKEN.ink,
        }}>Keep going.</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
          <span style={{ fontFamily: '"IBM Plex Sans"', fontSize: 88, fontWeight: 600, letterSpacing: -3.5, lineHeight: 1, color: TOKEN.ink }}>
            {fmt(subPrice)}
          </span>
          <span style={{ fontSize: 16, color: TOKEN.mute, letterSpacing: -0.1 }}>{subUnit}</span>
        </div>
        {isAnnual ? (
          <Mono color={TOKEN.green} weight={600} size={11}>
            ≈ {fmt(Math.round(annual / 12))}/MO · SAVES {fmt(savings)} VS MONTHLY ({savingsPct}% OFF)
          </Mono>
        ) : (
          <Mono color={TOKEN.mute} size={11}>
            BILLED MONTHLY · CANCEL ANY TIME
          </Mono>
        )}
        <div style={{ marginTop: 28 }}>
          {toggle}
        </div>
      </div>

      <div style={{ paddingTop: 4 }}>
        <Mono color={TOKEN.orange} weight={600}>WHAT'S INCLUDED</Mono>
        <div style={{
          marginTop: 18, display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          {[
            ['Unlimited conversations', 'No token meter, no per-message fees.'],
            ['Every channel you want', 'Web chat, SMS, and email — flip any of them on.'],
            ['Weekly tuning by us', 'We review transcripts and adjust. You do nothing.'],
            ['Human handoff to your CRM', 'HubSpot, Pipedrive, Salesforce, or Sheets.'],
            ['Cancel anytime', 'Month-to-month or annual. No long contract.'],
          ].map(([t, d]) => (
            <div key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <span style={{ flexShrink: 0, marginTop: 7, width: 9, height: 9, background: TOKEN.orange }}/>
              <div>
                <div style={{ fontFamily: '"IBM Plex Sans"', fontSize: 15, fontWeight: 600, letterSpacing: -0.2, color: TOKEN.ink }}>{t}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.5, color: TOKEN.mute, letterSpacing: -0.1, marginTop: 2 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>

        <a href="#engage" style={{ textDecoration: 'none', display: 'block', marginTop: 24 }}>
          <ECButton variant="orange" size="lg" style={{ width: '100%' }}>
            {`Start ${tweaks.trialWeeks}-week free trial`}
          </ECButton>
        </a>
        <Mono color={TOKEN.mute} size={10} style={{ display: 'block', textAlign: 'center', marginTop: 12 }}>
          NO CARD UPFRONT · {fmt(install)} INSTALL ONLY IF YOU KEEP IT
        </Mono>
      </div>
    </div>
  );

  // — Promise strip
  const promises = tweaks.showTokenLimitCallout && (
    <div style={{
      marginTop: 16, padding: '20px 24px', background: TOKEN.paperDeep,
      border: `1px solid ${TOKEN.hair}`,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
    }}>
      {[
        ['NO HIDDEN FEES',   'The number you see is the number you pay.'],
        ['NO TOKEN LIMITS',  'Talk to as many customers as you want.'],
        ['NO LONG CONTRACT', 'Cancel any month. We earn the renewal.'],
        ['NO BAIT & SWITCH', `${fmt(install)} install is locked in writing.`],
      ].map(([k, v], i) => (
        <div key={k} style={{
          padding: '0 20px',
          borderLeft: i === 0 ? 'none' : `1px solid ${TOKEN.hair}`,
        }}>
          <Mono color={TOKEN.orange} weight={600} size={11}>{k}</Mono>
          <div style={{ fontSize: 13.5, lineHeight: 1.45, color: TOKEN.inkSoft, letterSpacing: -0.1, marginTop: 6 }}>{v}</div>
        </div>
      ))}
    </div>
  );

  return (
    <Section id="pricing" num="05" eyebrow="Pricing"
      title={`${tweaks.trialWeeks} weeks free. ${fmt(install)} to install. ${fmt(monthly)}/mo or ${fmt(annual)}/yr.`}
      intro="One simple plan. Free for the first two weeks — run the agent against your real customers. Keep it and pay a one-time install. Then a flat monthly or yearly fee with everything included. No token limits, no surprise bills.">
      {ribbon}
      {planCard}
      {promises}
    </Section>
  );
}

// ── §05 Engage ─────────────────────────────────────────────────
function Engage() {
  const steps = [
    { n: '01', t: 'Open an inquiry', d: 'Two minutes. Tell us the channel, team size, and the one question you most want answered automatically.' },
    { n: '02', t: '30-min discovery call', d: 'We respond within 1 business day. Free, no commitment. Mutual NDA on request before details are shared.' },
    { n: '03', t: 'Written proposal · 48 hr', d: 'Fixed-scope, fixed-price proposal in 48 hours. If we are not a fit, we tell you on the call.' },
  ];
  return (
    <Section id="engage" num="08" eyebrow="Engage"
      title="Three steps. Two days to a proposal."
      intro="Engagement starts with a free 30-minute call. Bring one example question you want the agent to answer — we will sketch the rest live.">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {steps.map(s => (
          <div key={s.n} style={{
            padding: 28, border: `1px solid ${TOKEN.hair}`, background: TOKEN.paperDeep,
            position: 'relative', minHeight: 220, display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              fontFamily: '"IBM Plex Serif", Georgia, serif', fontStyle: 'italic',
              fontWeight: 400, fontSize: 56, letterSpacing: -2, lineHeight: 1,
              color: TOKEN.orange, marginBottom: 24,
            }}>{s.n}</div>
            <h3 style={{
              fontFamily: '"IBM Plex Sans"', fontSize: 19, fontWeight: 600,
              letterSpacing: -0.4, margin: '0 0 8px', color: TOKEN.ink,
            }}>{s.t}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: TOKEN.mute, letterSpacing: -0.1, margin: 0 }}>{s.d}</p>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40 }}>
        <InquiryForm/>
      </div>
    </Section>
  );
}

// ── About ──────────────────────────────────────────────────────
function About() {
  return (
    <Section id="about" num="09" eyebrow="About"
      title="Quantum-computing rigor, applied to SMB consulting."
      intro="EpochCore LLC is a one-engineer practice in Huntersville, NC. Founder John has shipped infrastructure for quantum computing platforms, IBM Watson.x agents, and enterprise cloud — now bringing that same engineering rigor to small businesses.">
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        border: `1px solid ${TOKEN.hair}`,
      }}>
        <div style={{ padding: 40 }}>
          <Mono color={TOKEN.orange} weight={600}>LEAD ENGINEER</Mono>
          <h3 style={{
            fontFamily: '"IBM Plex Serif", Georgia, serif', fontStyle: 'italic',
            fontWeight: 400, fontSize: 38, letterSpacing: -1, margin: '12px 0 20px',
            color: TOKEN.ink,
          }}>John, founder</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14.5, letterSpacing: -0.1, color: TOKEN.inkSoft }}>
            <Spec k="Prior" v="Quantum computing platforms · enterprise cloud"/>
            <Spec k="Agents" v="IBM Watson.x in production"/>
            <Spec k="Location" v="Huntersville, NC"/>
            <Spec k="Service area" v="Charlotte / Lake Norman + remote US"/>
            <Spec k="Hours" v="Mon–Fri · 9–2 PM / 4–7 PM ET"/>
          </div>
        </div>

        <div style={{ padding: 40, background: TOKEN.paperDeep, borderLeft: `1px solid ${TOKEN.hair}` }}>
          <Mono color={TOKEN.orange} weight={600}>PRINCIPLES</Mono>
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Principle n="i" t="Fixed scope > hourly clock" d="You know the price before we start. Change orders are written, not whispered."/>
            <Principle n="ii" t="Two-week delivery, or pause" d="If access is delayed, the day count pauses — and resumes. We do not bill stalls."/>
            <Principle n="iii" t="Refund if we miss" d="Miss a written deliverable? Fix it free, or refund that line item. No quibbling."/>
          </div>
        </div>
      </div>
    </Section>
  );
}

function Spec({ k, v }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 16, padding: '6px 0', borderTop: `1px solid ${TOKEN.hair}` }}>
      <Mono color={TOKEN.mute} size={11}>{k}</Mono>
      <span>{v}</span>
    </div>
  );
}

function Principle({ n, t, d }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14 }}>
      <span style={{
        fontFamily: '"IBM Plex Serif", Georgia, serif', fontStyle: 'italic',
        fontWeight: 400, fontSize: 28, color: TOKEN.orange, letterSpacing: -0.5, lineHeight: 1,
      }}>{n}</span>
      <div>
        <div style={{ fontFamily: '"IBM Plex Sans"', fontSize: 16, fontWeight: 600, letterSpacing: -0.3, color: TOKEN.ink }}>{t}</div>
        <div style={{ fontSize: 13.5, lineHeight: 1.5, color: TOKEN.mute, marginTop: 4, letterSpacing: -0.1 }}>{d}</div>
      </div>
    </div>
  );
}

// ── Footer ─────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{
      background: TOKEN.ink, color: TOKEN.paper,
      padding: '64px 0 32px',
    }}>
      <Wrap>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 56 }}>
          <div>
            <Wordmark color={TOKEN.paper} size={20}/>
            <p style={{
              marginTop: 18, fontSize: 14, lineHeight: 1.55,
              color: 'rgba(250,250,247,0.6)', maxWidth: 320, letterSpacing: -0.1,
            }}>
              AI agents for small businesses in Charlotte, Lake Norman, and remote across the US. Fixed price. Two-week delivery.
            </p>
          </div>
          <FootCol title="Service" links={['Capabilities', 'Channels', 'Dashboard', 'Pricing', 'Timeline']}/>
          <FootCol title="Engage" links={[{label: 'Send inquiry', href: '#engage'}, {label: 'Customer onboarding →', href: 'Onboarding Flow.html'}, {label: 'Email us', href: 'mailto:john@epochcoreqcs.com'}, 'Discovery FAQ']}/>
          <FootCol title="Company" links={['About', 'Huntersville, NC', 'EpochCore LLC', 'Privacy']}/>
        </div>
        <div style={{
          paddingTop: 24, borderTop: `1px solid rgba(250,250,247,0.12)`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <Mono color={TOKEN.paper} style={{ opacity: 0.5 }}>© 2025 EPOCHCORE LLC · HUNTERSVILLE NC</Mono>
          <Mono color={TOKEN.paper} style={{ opacity: 0.5 }}>v1.04 · UPDATED MAY 2026</Mono>
        </div>
      </Wrap>
    </footer>
  );
}
function FootCol({ title, links }) {
  return (
    <div>
      <Mono color={TOKEN.orange} weight={600}>{title}</Mono>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
        {links.map((l, i) => {
          const isObj = typeof l === 'object';
          const label = isObj ? l.label : l;
          const href = isObj ? l.href : '#';
          return (
            <a key={label} href={href} style={{
              color: 'rgba(250,250,247,0.75)', textDecoration: 'none',
              fontFamily: '"IBM Plex Sans"', fontSize: 14, letterSpacing: -0.1,
            }}>{label}</a>
          );
        })}
      </div>
    </div>
  );
}

// ── Scroll progress bar at the top of the viewport ─────────────
function ScrollProgress() {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? h.scrollTop / max : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 2,
      zIndex: 100, pointerEvents: 'none',
    }}>
      <div style={{
        height: '100%', width: `${p * 100}%`,
        background: TOKEN.orange,
        transition: 'width .1s linear',
      }}/>
    </div>
  );
}

// ── App ────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  return (
    <div style={{ background: TOKEN.paper, color: TOKEN.ink, minHeight: '100vh' }}>
      <ScrollProgress/>
      <TopBar/>
      <Nav/>
      <Hero tweaks={t}/>
      <Capabilities/>
      <TryItSection/>
      <Channels/>
      <DashboardSection/>
      <Pricing tweaks={t}/>
      <FAQSection/>
      <Timeline/>
      <Engage/>
      <About/>
      <Footer/>

      <TweaksPanel title="Pricing tweaks">
        <TweakSection label="Free trial"/>
        <TweakSlider label="Trial length" value={t.trialWeeks} min={1} max={8} step={1} unit=" wk"
                     onChange={(v) => setTweak('trialWeeks', v)}/>
        <TweakToggle label="Show trial ribbon" value={t.showTrialRibbon}
                     onChange={(v) => setTweak('showTrialRibbon', v)}/>

        <TweakSection label="Prices"/>
        <TweakSlider label="Install (one-time)" value={t.installPrice} min={0} max={499} step={1} unit="  $"
                     onChange={(v) => setTweak('installPrice', v)}/>
        <TweakSlider label="Monthly" value={t.monthlyPrice} min={49} max={999} step={10} unit="  $"
                     onChange={(v) => setTweak('monthlyPrice', v)}/>
        <TweakSlider label="Annual" value={t.annualPrice} min={199} max={4999} step={10} unit="  $"
                     onChange={(v) => setTweak('annualPrice', v)}/>

        <TweakSection label="Plan defaults"/>
        <TweakRadio label="Default billing" value={t.defaultBilling}
                    options={['monthly', 'annual']}
                    onChange={(v) => setTweak('defaultBilling', v)}/>
        <TweakToggle label="Show promise strip" value={t.showTokenLimitCallout}
                     onChange={(v) => setTweak('showTokenLimitCallout', v)}/>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);