// ea.jsx — Kevlex EA product page.
// Tokens & chrome (T, serif, sans, mono, SiteHeader, SiteFooter, primitives)
// are provided by shared.jsx via window.

const accent = '#F5A623';

// ── Hero ───────────────────────────────────────────────────────────────────
function EAHero() {
  return (
    <section style={{
      padding: '88px 56px 96px',
      display: 'grid',
      gridTemplateColumns: '1.1fr 0.9fr',
      gap: 64,
      alignItems: 'center',
    }}>
      <div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32,
        }}>
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: accent,
          }}>§ Tool 01 — Kevlex EA</span>
          <Rule color={T.hair} style={{ flex: 1, maxWidth: 220 }} />
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: T.dim,
          }}>In use · v1.2</span>
        </div>

        <h1 style={{
          fontFamily: serif, fontWeight: 400,
          fontSize: 'clamp(56px, 7vw, 104px)',
          lineHeight: 0.96, letterSpacing: '-0.025em',
          color: T.warm, margin: 0, textWrap: 'pretty',
        }}>
          Your AI EA{' '}
          <em style={{ fontStyle: 'italic', color: accent, fontWeight: 400 }}>
            that never sleeps,
          </em>
          {' '}and never loses track.
        </h1>

        <p style={{
          fontFamily: serif, fontSize: 20, lineHeight: 1.5,
          color: T.dim, marginTop: 32, maxWidth: 540, textWrap: 'pretty',
        }}>
          A silent intelligence layer that reads your email, calendar, chat,
          and meeting transcripts overnight — and shows up at 08:30 with a
          pre-filled agenda. Approve, dismiss, or let it run.
        </p>

        <div style={{
          display: 'flex', gap: 32, marginTop: 44, alignItems: 'baseline', flexWrap: 'wrap',
        }}>
          <HeroStat label="Drops at" value="08:30" daily />
          <HeroStat label="Channels read" value="04" />
          <HeroStat label="Reminders / day" value="04" />
          <HeroStat label="API cost / mo" value="~$35" />
        </div>
      </div>

      <EALogoBlock />
    </section>
  );
}

function HeroStat({ label, value, daily }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{
        fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: T.dimer,
      }}>{label}{daily ? ' · weekdays' : ''}</span>
      <div style={{
        fontFamily: serif, fontSize: 30, fontWeight: 400,
        color: T.warm, lineHeight: 1,
      }}>{value}</div>
    </div>
  );
}

function EALogoBlock() {
  return (
    <div style={{
      background: T.surfaceDark, borderRadius: 16, padding: '56px 56px 44px',
      border: `1px solid ${T.hair}`,
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 36,
    }}>
      <EALogo size={196} amber={accent} />
      <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{
          fontFamily: serif, fontSize: 40, fontWeight: 400,
          color: T.warm, letterSpacing: '-0.02em', lineHeight: 1,
        }}>
          Kevlex <em style={{ fontStyle: 'italic', color: accent }}>EA</em>
        </div>
        <div style={{
          fontFamily: mono, fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: T.dim,
        }}>The Executive Assistant</div>
      </div>

      <Rule color={T.hair} />

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, width: '100%',
      }}>
        {[
          ['24', '·'], ['48', '·'], ['128', '·'],
        ].map(([s], i) => (
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          }}>
            <EALogo size={Number(s)} amber={accent} />
            <span style={{
              fontFamily: mono, fontSize: 10, letterSpacing: '0.14em', color: T.dimer,
            }}>{s}px</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── What it is ─────────────────────────────────────────────────────────────
function WhatItIs() {
  return (
    <section style={{
      background: T.warm, color: T.ink, padding: '96px 56px 88px',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56,
      }}>
        <div>
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: accent,
          }}>§ 01 — What it is</span>
          <h2 style={{
            fontFamily: serif, fontWeight: 400,
            fontSize: 'clamp(36px, 4.2vw, 56px)',
            lineHeight: 1.02, letterSpacing: '-0.02em',
            color: T.ink, margin: '20px 0 0', maxWidth: 520, textWrap: 'pretty',
          }}>
            Not a task manager.{' '}
            <em style={{ fontStyle: 'italic', color: T.warmDim }}>
              A silent background layer.
            </em>
          </h2>
        </div>
        <div>
          <p style={{
            fontFamily: serif, fontSize: 21, lineHeight: 1.55,
            color: T.ink, margin: 0, textWrap: 'pretty',
          }}>
            Busy operators drown in fragmented signals across email, calendar,
            and chat. Commitments slip. Meeting prep is last-minute. There is
            no single view of what actually needs to happen today.
          </p>
          <p style={{
            fontFamily: serif, fontSize: 19, lineHeight: 1.55,
            color: T.warmDim, margin: '24px 0 0', textWrap: 'pretty',
          }}>
            Kevlex EA replaces manual triage. An AI reads everything overnight
            and arrives at 08:30 with a prioritised, drafted action list. You
            spend your morning deciding — not digging.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── How it works (5-step timeline) ─────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: '01',
      time: 'ONCE',
      title: 'Connect your channels.',
      body: 'Gmail, Google Calendar, Slack, and Read.ai via OAuth. Five minutes; you can change anything later.',
    },
    {
      n: '02',
      time: '05:30',
      title: 'The EA reads everything.',
      body: 'Every weekday before sunrise, the AI scans all four channels, identifies priorities, and drafts actions into your inbox.',
    },
    {
      n: '03',
      time: '08:30',
      title: 'A brief lands on your phone.',
      body: 'A push notification: “You have N items ready.” One deep link opens the web app to a pre-sorted day.',
    },
    {
      n: '04',
      time: 'Three keys',
      title: 'Approve, delegate, or dismiss.',
      body: 'Simple actions auto-execute — drafts send, Slack replies post, calendars adjust. Heavier ones get queued. You stay in the loop.',
    },
    {
      n: '05',
      time: 'Throughout the day',
      title: 'Prep, nudge, wrap.',
      body: 'Meeting briefs fire 30 minutes before each call. Reminders at 11:00, 15:00, 17:00. An end-of-day wrap lands at 18:00.',
    },
  ];
  return (
    <section style={{ padding: '96px 56px 88px' }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 56,
      }}>
        <span style={{
          fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: accent,
        }}>§ 02 — How it works</span>
        <Rule color={T.hair} style={{ flex: 1, maxWidth: 280 }} />
        <h2 style={{
          fontFamily: serif, fontWeight: 400,
          fontSize: 'clamp(34px, 3.8vw, 48px)',
          lineHeight: 1.04, letterSpacing: '-0.02em',
          color: T.warm, margin: 0,
        }}>
          A day, end to end.
        </h2>
      </div>

      <ol style={{ listStyle: 'none', margin: 0, padding: 0 }}>
        {steps.map((s, i) => (
          <li key={s.n}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '64px 140px 1fr 1.2fr',
              gap: 32,
              alignItems: 'baseline',
              padding: '28px 0',
              borderTop: i === 0 ? `1px solid ${T.hair}` : 'none',
              borderBottom: `1px solid ${T.hair}`,
            }}>
              <span style={{
                fontFamily: mono, fontSize: 13, letterSpacing: '0.14em',
                color: accent,
              }}>{s.n}</span>
              <span style={{
                fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: T.dim,
              }}>{s.time}</span>
              <h3 style={{
                fontFamily: serif, fontWeight: 400,
                fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.015em',
                color: T.warm, margin: 0,
              }}>{s.title}</h3>
              <p style={{
                fontFamily: serif, fontSize: 17, lineHeight: 1.5,
                color: T.dim, margin: 0,
              }}>{s.body}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

// ── Features ───────────────────────────────────────────────────────────────
function Features() {
  const features = [
    {
      n: 'A',
      name: 'Morning Brief',
      tag: '05:30',
      body: 'AI reads all channels, identifies priorities, drafts actions — every weekday before you wake up.',
    },
    {
      n: 'B',
      name: 'Action Inbox',
      tag: 'Ready · Processing · Done',
      body: 'Lifecycle queue with AI flags for stale or probably-handled items. Three keys move every card.',
    },
    {
      n: 'C',
      name: 'Meeting Prep',
      tag: 'T-30 min',
      body: 'Auto-briefs fire thirty minutes before each calendar event. Context, last touch, three questions.',
    },
    {
      n: 'D',
      name: 'Commitment Tracking',
      tag: 'Sent mail scan',
      body: 'Scans outbound for promises made. Resurfaces the unfollowed ones before they turn into apologies.',
    },
    {
      n: 'E',
      name: 'Weekly Plan',
      tag: 'Refreshed 2×/day',
      body: 'An AI-drafted weekly plan, rewritten from real signals as the week moves. No stale Mondays.',
    },
    {
      n: 'F',
      name: 'Project Tracking',
      tag: 'Per project',
      body: 'AI summary, phase, blockers, and deliverables for every active project — kept current automatically.',
    },
    {
      n: 'G',
      name: 'Push Cadence',
      tag: 'ntfy.sh',
      body: 'Brief at 08:30. Nudges at 11:00, 15:00, 17:00. Wrap at 18:00. Quiet on weekends, by default.',
    },
  ];

  return (
    <section style={{
      background: T.warm, color: T.ink,
      padding: '96px 56px 96px',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end',
        gap: 24, marginBottom: 56,
      }}>
        <div>
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: accent,
          }}>§ 03 — What it does</span>
          <h2 style={{
            fontFamily: serif, fontWeight: 400,
            fontSize: 'clamp(34px, 4vw, 56px)',
            lineHeight: 1.02, letterSpacing: '-0.02em',
            color: T.ink, margin: '20px 0 0', maxWidth: 640, textWrap: 'pretty',
          }}>
            Seven things, on time.{' '}
            <em style={{ fontStyle: 'italic', color: T.warmDim }}>
              Every weekday.
            </em>
          </h2>
        </div>
        <span style={{
          fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: T.warmDimer,
        }}>07 features</span>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
        gap: 0,
        borderTop: `1px solid ${T.warmHair}`,
        borderLeft: `1px solid ${T.warmHair}`,
      }}>
        {features.map((f) => (
          <article key={f.n} style={{
            borderRight: `1px solid ${T.warmHair}`,
            borderBottom: `1px solid ${T.warmHair}`,
            padding: '28px 28px 32px',
            display: 'flex', flexDirection: 'column', gap: 14,
            minHeight: 220,
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            }}>
              <span style={{
                fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
                color: accent,
              }}>· {f.n}</span>
              <span style={{
                fontFamily: mono, fontSize: 10, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: T.warmDimer,
              }}>{f.tag}</span>
            </div>
            <h3 style={{
              fontFamily: serif, fontWeight: 400,
              fontSize: 26, lineHeight: 1.05, letterSpacing: '-0.015em',
              color: T.ink, margin: 0,
            }}>{f.name}</h3>
            <p style={{
              fontFamily: serif, fontSize: 16, lineHeight: 1.5,
              color: T.warmDim, margin: 0,
            }}>{f.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Integrations strip ─────────────────────────────────────────────────────
function Integrations() {
  const ints = [
    { name: 'Gmail', scope: 'Read · draft · send' },
    { name: 'Google Calendar', scope: 'Read · adjust events' },
    { name: 'Slack', scope: 'Read channels · post replies' },
    { name: 'Read.ai', scope: 'Meeting transcripts' },
    { name: 'ntfy.sh', scope: 'Push notifications' },
  ];

  return (
    <section style={{
      padding: '96px 56px 0',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 56, alignItems: 'start',
      }}>
        <div>
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: accent,
          }}>§ 04 — Integrations</span>
          <h2 style={{
            fontFamily: serif, fontWeight: 400,
            fontSize: 'clamp(32px, 3.6vw, 44px)',
            lineHeight: 1.04, letterSpacing: '-0.02em',
            color: T.warm, margin: '20px 0 18px',
            textWrap: 'pretty',
          }}>
            Five channels.{' '}
            <em style={{ fontStyle: 'italic', color: T.dim }}>One inbox.</em>
          </h2>
          <p style={{
            fontFamily: serif, fontSize: 16, lineHeight: 1.55,
            color: T.dim, margin: 0, maxWidth: 360,
          }}>
            All connections are OAuth-scoped and revokable. We never read more
            than the brief requires, and nothing is shared with third parties.
          </p>
          <div style={{
            display: 'flex', gap: 14, marginTop: 22, flexWrap: 'wrap',
          }}>
            <a href="privacy.html" style={{
              fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: accent, textDecoration: 'none',
              borderBottom: `1px solid ${accent}`, paddingBottom: 2,
            }}>Privacy Policy ↗</a>
            <a href="terms.html" style={{
              fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: T.dim, textDecoration: 'none',
              borderBottom: `1px solid ${T.hair}`, paddingBottom: 2,
            }}>Terms ↗</a>
          </div>
        </div>

        <div>
          {ints.map((it, i) => (
            <div key={it.name} style={{
              display: 'grid', gridTemplateColumns: '32px 1fr 1.2fr 56px',
              gap: 24, alignItems: 'center',
              padding: '22px 0',
              borderTop: `1px solid ${T.hair}`,
              borderBottom: i === ints.length - 1 ? `1px solid ${T.hair}` : 'none',
            }}>
              <span style={{
                fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
                color: accent,
              }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{
                fontFamily: serif, fontSize: 22, color: T.warm,
                letterSpacing: '-0.01em',
              }}>{it.name}</span>
              <span style={{
                fontFamily: mono, fontSize: 11, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: T.dim,
              }}>{it.scope}</span>
              <span style={{
                fontFamily: mono, fontSize: 10, letterSpacing: '0.14em',
                color: accent, justifySelf: 'end',
                border: `1px solid ${accent}`, padding: '4px 8px', borderRadius: 4,
              }}>OAUTH</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── What makes it different ────────────────────────────────────────────────
function Different() {
  const tenets = [
    {
      n: 'A',
      title: 'Not rule-based.',
      body: 'Claude reads each message in context and decides what is actionable today. No brittle if-this-then-that to maintain.',
    },
    {
      n: 'B',
      title: 'Proactive, not reactive.',
      body: 'It does not wait for a prompt. It shows up before your day starts with a ranked agenda already drafted.',
    },
    {
      n: 'C',
      title: 'Multi-channel synthesis.',
      body: 'Email, calendar, chat, and meeting transcripts collapsed into one inbox of decisions you actually need to make.',
    },
    {
      n: 'D',
      title: 'Quietly cost-efficient.',
      body: 'Haiku for the polish; Sonnet for the reasoning. The whole rig runs on roughly $35 a month of API spend.',
    },
  ];

  return (
    <section style={{
      padding: '96px 56px 96px',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56,
      }}>
        <div>
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: accent,
          }}>§ 05 — The Difference</span>
          <h2 style={{
            fontFamily: serif, fontWeight: 400,
            fontSize: 'clamp(34px, 3.8vw, 52px)',
            lineHeight: 1.02, letterSpacing: '-0.02em',
            color: T.warm, margin: '20px 0 0', maxWidth: 460, textWrap: 'pretty',
          }}>
            Why this,{' '}
            <em style={{ fontStyle: 'italic', color: T.dim }}>
              and not another bot.
            </em>
          </h2>
          <p style={{
            fontFamily: serif, fontSize: 16, lineHeight: 1.55,
            color: T.dim, margin: '20px 0 0', maxWidth: 420,
          }}>
            Built for founders, team leads, and operators carrying five-plus
            open projects at once — the people for whom triage is the job.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          {tenets.map((t) => (
            <div key={t.n} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <span style={{
                fontFamily: mono, fontSize: 10, letterSpacing: '0.18em',
                color: T.dimer,
              }}>· {t.n}</span>
              <h3 style={{
                fontFamily: serif, fontSize: 24, fontWeight: 500,
                letterSpacing: '-0.01em', lineHeight: 1.15,
                color: T.warm, margin: 0,
              }}>{t.title}</h3>
              <p style={{
                fontFamily: serif, fontSize: 15, lineHeight: 1.55,
                color: T.dim, margin: 0, maxWidth: 320,
              }}>{t.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Closing index / nav back ────────────────────────────────────────────────
function ClosingIndex() {
  return (
    <section style={{
      padding: '32px 56px 80px',
      borderTop: `1px solid ${T.hair}`,
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'center',
      }}>
        <div>
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: T.dimer,
          }}>End of brief</span>
          <h3 style={{
            fontFamily: serif, fontWeight: 400, fontSize: 36, lineHeight: 1.04,
            letterSpacing: '-0.02em', color: T.warm, margin: '14px 0 0',
          }}>
            <em style={{ fontStyle: 'italic', color: T.dim }}>Back to the index →</em>
          </h3>
        </div>
        <a href="index.html" style={{
          fontFamily: mono, fontSize: 12, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: accent, textDecoration: 'none',
          justifySelf: 'end',
          border: `1px solid ${accent}`,
          padding: '14px 22px', borderRadius: 6,
        }}>KevlexOS Index ↗</a>
      </div>
    </section>
  );
}

// ── App ─────────────────────────────────────────────────────────────────────
function App() {
  return (
    <div style={{
      background: T.deep, color: T.warm, minHeight: '100vh',
      fontFamily: sans,
    }}>
      <TopStrap accent={accent} />
      <SiteHeader accent={accent} theme="dark" current="ea" />
      <EAHero />
      <WhatItIs />
      <HowItWorks />
      <Features />
      <Integrations />
      <Different />
      <ClosingIndex />
      <SiteFooter accent={accent} />
    </div>
  );
}

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