// AlphaEdge — Page Sections (v2 · Light Premium Editorial)
// Re-skinned to warm paper, editorial type, soft shadows. All section names
// and props preserved so the existing pages keep composing unchanged.

const AUTOMATIONS = [
  {
    title: 'Pre-trade analysis & execution',
    trigger: 'Real-time',
    tagline: 'Reads the market, finds your setup, and acts — end to end.',
    steps: [
      'Pull last 100 candles · all timeframes',
      'Scan database for matching setups',
      'Hand context to the AI agent',
      'Risk & constraint checks passed',
      'Execute trade via Orders API',
    ],
  },
  {
    title: 'Morning signal briefing',
    trigger: 'Daily · 06:00',
    tagline: 'Wake up to a full higher-timeframe read, in Telegram.',
    steps: [
      'Analyze higher-timeframe structure',
      'AI agent synthesizes the bias',
      'Format multi-timeframe outlook',
      'Send to your Telegram bot',
    ],
  },
  {
    title: 'News & events watcher',
    trigger: 'Daily',
    tagline: "Fundamental and economic news, filtered so you don't have to look.",
    steps: [
      'Fetch the economic calendar',
      'Pull fundamental & macro news',
      'AI agent ranks events by impact',
      'Flag what could move your pairs',
    ],
  },
  {
    title: 'End-of-day reporter',
    trigger: 'Daily · 22:00',
    tagline: 'Every trade reviewed and summarised before you sleep.',
    steps: [
      "Collect today's MT5 trades",
      'Compute P&L, win rate & stats',
      'AI agent writes the report',
      'Deliver your end-of-day summary',
    ],
  },
];

// Section heading block — eyebrow + h2 + lead, used across sections.
function SecHead({ accent, label, title, sub, center, maxW = 640 }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 48,
      maxWidth: center ? 720 : 'none', marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>
      {label && <SectionLabel accent={accent}>{label}</SectionLabel>}
      <h2 style={{ fontFamily: FD, fontSize: 'clamp(30px,3.8vw,46px)', fontWeight: 700, color: INK[1],
        letterSpacing: '-0.03em', lineHeight: 1.12, marginBottom: sub ? 16 : 0,
        maxWidth: center ? 'none' : maxW, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0,
        textWrap: 'balance' }}>{title}</h2>
      {sub && <p style={{ fontFamily: FB, fontSize: 17, color: INK[2], lineHeight: 1.6,
        maxWidth: 580, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>{sub}</p>}
    </div>
  );
}

/* ============================================================ HERO (home) */
const HERO_FONTS = {
  'Plus Jakarta Sans': { family: "'Plus Jakarta Sans', system-ui, sans-serif", weight: 300, tracking: '-0.015em', lineHeight: 1.06 },
  'Schibsted Grotesk': { family: "'Schibsted Grotesk', system-ui, sans-serif", weight: 800, tracking: '-0.04em',  lineHeight: 1.02 },
  'DM Sans':           { family: "'DM Sans', system-ui, sans-serif",           weight: 300, tracking: '-0.01em',  lineHeight: 1.06 },
  'Outfit':            { family: "'Outfit', system-ui, sans-serif",            weight: 200, tracking: '-0.02em',  lineHeight: 1.04 },
  'Sora':              { family: "'Sora', system-ui, sans-serif",              weight: 200, tracking: '-0.02em',  lineHeight: 1.06 },
  'Newsreader':        { family: "'Newsreader', Georgia, serif",               weight: 300, tracking: '-0.01em',  lineHeight: 1.1  },
};

function HeroSection({ accent, id, cardSize = 420, heroFont = 'Plus Jakarta Sans' }) {
  const a = acc(accent);
  const fnt = HERO_FONTS[heroFont] || HERO_FONTS['Plus Jakarta Sans'];
  return (
    <section id={id} style={{ position: 'relative', overflow: 'hidden',
      background: `radial-gradient(60% 50% at 78% 18%, ${a.tint} 0%, transparent 70%), ${PAPER[1]}`,
      padding: '128px 32px 96px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid',
        gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,0.95fr)', gap: 56, alignItems: 'center' }} className="hero-grid">
        <div className="hero-copy">
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 26,
            background: PAPER[0], border: `1px solid ${BORDER.default}`, borderRadius: 9999,
            padding: '6px 14px', boxShadow: '0 1px 2px rgba(26,27,32,0.04)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: UP }} />
            <span style={{ fontFamily: FB, fontSize: 12.5, fontWeight: 500, color: INK[2] }}>Currently accepting new clients</span>
          </div>
          <h1 style={{ fontFamily: fnt.family, fontSize: 'clamp(44px,5.6vw,76px)', fontWeight: fnt.weight,
            lineHeight: fnt.lineHeight, letterSpacing: fnt.tracking, color: INK[1], marginBottom: 22, textWrap: 'balance' }}>
            Where trading<br />meets <span style={{ color: a.c, fontWeight: fnt.weight + 100 }}>agentic.</span>
          </h1>
          <p style={{ fontFamily: FB, fontSize: 'clamp(17px,1.5vw,20px)', color: INK[2],
            lineHeight: 1.6, maxWidth: 540, marginBottom: 34, textWrap: 'pretty' }}>
            I build the infrastructure behind autonomous trading — live market data feeds,
            AI-driven workflows, and execution that runs 24/7. You set the strategy; the system
            runs it while you sleep.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <CTAButton accent={accent} href="contact.html" icon="calendar">Schedule a consultation</CTAButton>
            <CTAButton accent={accent} outline href="services.html">See what I build</CTAButton>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', width: cardSize, maxWidth: '100%' }} className="hero-visual">
          <ProductMockup accent={accent} automations={AUTOMATIONS} />
        </div>
      </div>
      <style>{`@media (max-width: 880px){
        .hero-grid{ grid-template-columns: 1fr !important; gap: 44px !important; }
        .hero-visual{ width: 100% !important; justify-content: flex-start !important; }
      }`}</style>
    </section>
  );
}

/* ============================================================ LOGO WALL strip */
function LogoWallSection({ accent }) {
  return (
    <section style={{ background: PAPER[1], padding: '8px 32px 64px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ fontFamily: FB, fontSize: 12.5, fontWeight: 600, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: INK[4], textAlign: 'center', marginBottom: 30 }}>
          Trusted by trading teams &amp; funds
        </div>
        <LogoWall accent={accent} />
      </div>
    </section>
  );
}

/* ============================================================ PROBLEM */
function ProblemSection({ accent, id }) {
  const a = acc(accent);
  const problems = [
    { icon: 'unplug', title: 'Fragile data feeds',
      desc: "The top reason backtests fall apart live isn't the strategy — it's the data. Gapped candles, dropped ticks, and exchange drift quietly corrupt every signal.",
      stat: '~90%', statLabel: 'of backtested strategies fail when they go live' },
    { icon: 'bot', title: "A bot isn't an edge",
      desc: 'Spinning up a bot is the easy part. Keeping it alive — with risk controls, monitoring, and uptime — is where almost all of them fall over.',
      stat: '95%', statLabel: 'of AI trading bots lose money within 90 days' },
    { icon: 'shield-alert', title: 'No execution layer',
      desc: 'Manual order entry and weak risk caps quietly drain returns. A single breached loss limit can end an account before the edge ever plays out.',
      stat: '52%', statLabel: 'of automated accounts fail within their first 3 months' },
    { icon: 'cpu', title: 'Trading against machines',
      desc: "Most of the market is already automated. By hand, you're reacting in seconds against systems that act in milliseconds.",
      stat: '60–75%', statLabel: 'of US equity trades are executed by algorithms' },
  ];
  return (
    <section id={id} style={{ background: PAPER[2], padding: '104px 32px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SecHead accent={accent} label="The problem"
          title={<span>Automated trading isn't about <span style={{ color: a.c }}>the bot</span></span>}
          sub="Anyone can run a strategy. The hard part is everything around it — the data, the execution, the uptime. That's the machinery I build, so it's off your plate." />
        <div className="problem-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {problems.map(p => <ProblemCard key={p.title} accent={accent} {...p} />)}
        </div>
        <div style={{ fontFamily: FB, fontSize: 12.5, color: INK[4], marginTop: 24, lineHeight: 1.55 }}>
          Figures from public industry reporting — JPMorgan, For Traders, and algorithmic-trading research.
        </div>
      </div>
      <style>{`@media (max-width: 720px){ .problem-grid{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* ============================================================ SERVICES (full) */
function ServicesSection({ accent, id }) {
  const services = [
    { icon: 'database', tag: 'Core', title: 'Market data setup',
      desc: 'Exchange connections, feed handlers, normalization pipelines, tick storage, and OHLCV aggregation. From raw bytes to clean, queryable data.' },
    { icon: 'workflow', tag: 'Core', title: 'Agentic trading workflows',
      desc: 'Autonomous execution pipelines with AI decision layers, risk management, and real-time position controls. Strategies that act without you.' },
    { icon: 'server', tag: 'Core', title: 'Infrastructure architecture',
      desc: 'End-to-end system design for low-latency trading environments — messaging queues, persistence, database optimization, and monitoring.' },
    { icon: 'message-square', tag: 'Add-on', title: 'Front-end AI assistant',
      desc: 'A conversational AI interface for your trading platform — ask about positions, get market summaries, or control strategies by chat.' },
    { icon: 'zap', tag: 'Add-on', title: 'Custom automations',
      desc: 'Bespoke workflow automation — alerts, reporting, rebalancing triggers, or any repeating operational task that should run without you.' },
    { icon: 'line-chart', tag: 'Add-on', title: 'Monitoring & dashboards',
      desc: 'Real-time operational dashboards showing feed health, strategy P&L, latency metrics, and anomaly alerts in one place.' },
  ];
  return (
    <section id={id} style={{ background: PAPER[1], padding: '104px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SecHead accent={accent} label="What I build" title="Infrastructure for serious traders"
          sub="Every engagement is scoped to your exact stack, exchange access, and execution requirements. No off-the-shelf templates." maxW={600} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
          {services.map(s => <ServiceCard key={s.title} accent={accent} {...s} />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ SERVICES (home preview) */
function ServicesHomeSection({ accent }) {
  const a = acc(accent);
  const core = [
    { icon: 'database', title: 'Market data setup',
      desc: 'Exchange connections, feed handlers, normalization pipelines, and OHLCV aggregation. From raw bytes to clean, queryable data in n8n.' },
    { icon: 'workflow', title: 'Agentic trading workflows',
      desc: 'Autonomous execution pipelines with AI decision layers, risk management, and real-time position controls. Strategies that act without you.' },
    { icon: 'zap', title: 'Custom automations',
      desc: 'Morning briefings, end-of-day reports, news watchers — built on n8n and triggered on your schedule, zero babysitting required.' },
  ];
  return (
    <section style={{ background: PAPER[1], padding: '104px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 40 }}>
          <div>
            <SectionLabel accent={accent}>What I build</SectionLabel>
            <h2 style={{ fontFamily: FD, fontSize: 'clamp(28px,3.4vw,40px)', fontWeight: 700, color: INK[1],
              letterSpacing: '-0.03em', lineHeight: 1.12 }}>Infrastructure for serious traders</h2>
          </div>
          <a href="services.html" style={{ fontFamily: FB, fontSize: 14.5, fontWeight: 600, color: a.c,
            textDecoration: 'none', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 6 }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.7'} onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
            See all services →
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 18 }}>
          {core.map(s => <ServiceCard key={s.title} accent={accent} {...s} />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ HOW I WORK (dark themed page) */
function HowIWorkSection({ accent }) {
  const a = acc(accent);
  const FG = "'Inter', system-ui, sans-serif"; // matches the reference timeline font
  const timelineRef = React.useRef(null);
  const stepRefs = React.useRef([]);
  const [fill, setFill] = React.useState(0);
  const [ops, setOps] = React.useState([]);
  const [geom, setGeom] = React.useState({ top: 22, height: 0 });

  React.useEffect(() => {
    const MC = 16 + 6.5; // marker top offset + half its height = marker center
    const onScroll = () => {
      const el = timelineRef.current;
      const first = stepRefs.current[0];
      const last = stepRefs.current[stepRefs.current.length - 1];
      if (el && first && last) {
        // line spans only from the first square to the last square
        const top = first.offsetTop + MC;
        const bottom = last.offsetTop + MC;
        setGeom({ top, height: bottom - top });
        const cTop = el.getBoundingClientRect().top;
        const anchor = window.innerHeight * 0.42; // fill-line tip
        const pct = Math.max(0, Math.min(1, (anchor - (cTop + top)) / (bottom - top)));
        setFill(pct);
      }
      // per-stage fade: stays dim until the white line reaches its square marker
      const focus = window.innerHeight * 0.42; // matches the fill-line tip
      setOps(stepRefs.current.map(node => {
        if (!node) return 1;
        const markerTop = node.getBoundingClientRect().top + 16; // the square's position
        const dist = markerTop - focus;
        return dist <= 0 ? 1 : Math.max(0.14, 1 - dist / 200);
      }));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);

  const steps = [
    { n: '01', title: 'Discovery call',
      desc: 'We map your current stack, goals, exchange access, and data requirements in a focused session — so the scope is grounded in what you actually need.',
      tags: ['Stack audit', 'Goals & constraints', 'Exchange access'] },
    { n: '02', title: 'Proposal & scope',
      desc: 'You get a clear document: deliverables, timeline, and a fixed price. No hourly billing, no surprises — you know exactly what you are getting up front.',
      tags: ['Deliverables', 'Timeline', 'Fixed pricing'] },
    { n: '03', title: 'Build & deploy',
      desc: 'I provision the servers, install MT5 and the data EAs, and wire your dashboard APIs into n8n — built, tested, and deployed straight to your environment.',
      tags: ['Servers provisioned', 'MT5 + data EAs', 'APIs & n8n wired'] },
    { n: '04', title: 'Handoff & support',
      desc: 'A full walkthrough, complete documentation, and 30 days of post-launch support — so you are never left guessing how your own infrastructure works.',
      tags: ['Documentation', 'Walkthrough session', '30-day support'] },
  ];

  const stepGap = 'clamp(240px, 44vh, 450px)';

  return (
    <section style={{ background: a.c, color: '#fff', padding: '160px 32px 140px' }} className="howi-section">
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>

        {/* HERO */}
        <div style={{ textAlign: 'center', marginBottom: 'clamp(140px, 22vh, 260px)' }}>
          <h1 style={{ fontFamily: FG, fontSize: 'clamp(56px, 7.4vw, 100px)', fontWeight: 700,
            color: '#fff', letterSpacing: '-0.035em', marginBottom: 22, lineHeight: 1.02,
            textWrap: 'balance' }}>How I work</h1>
          <p style={{ fontFamily: FG, fontSize: 'clamp(16px, 1.4vw, 19px)', fontWeight: 400,
            color: 'rgba(255,255,255,0.72)', maxWidth: 640, margin: '0 auto', lineHeight: 1.55,
            textWrap: 'pretty' }}>
            A proven, transparent process refined across every build — no black boxes, no surprises.
          </p>
        </div>

        {/* TIMELINE */}
        <div ref={timelineRef} style={{ position: 'relative', maxWidth: 820, margin: '0 auto' }} className="howi-timeline">
          {/* faint base line — spans first square to last square only */}
          <div className="howi-line" style={{ position: 'absolute', left: 100, top: geom.top, height: geom.height, width: 2,
            background: 'rgba(255,255,255,0.18)' }}/>
          {/* bright progress line that follows the scroll */}
          <div className="howi-line howi-line-fill" style={{ position: 'absolute', left: 100, top: geom.top, width: 2,
            height: geom.height * fill, background: '#fff',
            transition: 'height 90ms linear' }}/>

          {steps.map((s, i) => (
            <div key={s.n} ref={el => stepRefs.current[i] = el} className="howi-step"
              style={{ position: 'relative', paddingLeft: 200, marginBottom: stepGap,
                opacity: ops[i] ?? 0.14, transition: 'opacity 320ms ease' }}>
              {/* square marker */}
              <div className="howi-marker" style={{ position: 'absolute', left: 94, top: 16, width: 13, height: 13,
                background: '#fff' }}/>
              {/* faded step number */}
              <div style={{ fontFamily: FG, fontSize: 'clamp(44px, 4.8vw, 60px)', fontWeight: 500,
                color: 'rgba(255,255,255,0.32)', letterSpacing: '-0.03em', lineHeight: 1,
                marginBottom: 20, fontVariantNumeric: 'tabular-nums' }}>{s.n}</div>
              <h2 style={{ fontFamily: FG, fontSize: 'clamp(28px, 3.1vw, 38px)', fontWeight: 600,
                color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 16 }}>
                {s.title}
              </h2>
              <p style={{ fontFamily: FG, fontSize: 16.5, color: 'rgba(255,255,255,0.78)',
                lineHeight: 1.6, marginBottom: 24, maxWidth: 540, textWrap: 'pretty' }}>{s.desc}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {s.tags.map(tag => (
                  <span key={tag} style={{ fontFamily: FG, fontSize: 12.5, fontWeight: 500,
                    color: '#fff', background: 'rgba(255,255,255,0.10)',
                    border: '1px solid rgba(255,255,255,0.26)', borderRadius: 5,
                    padding: '7px 13px', whiteSpace: 'nowrap' }}>{tag}</span>
                ))}
              </div>
            </div>
          ))}

          {/* CTA — last node on the timeline */}
          <div ref={el => stepRefs.current[steps.length] = el} className="howi-step"
            style={{ position: 'relative', paddingLeft: 200,
              opacity: ops[steps.length] ?? 0.14, transition: 'opacity 320ms ease' }}>
            <div className="howi-marker" style={{ position: 'absolute', left: 94, top: 16, width: 13, height: 13,
              background: '#fff' }}/>
            <h2 style={{ fontFamily: FG, fontSize: 'clamp(28px, 3.1vw, 38px)', fontWeight: 600,
              color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 16 }}>
              Ready to get started?
            </h2>
            <p style={{ fontFamily: FG, fontSize: 16.5, color: 'rgba(255,255,255,0.78)',
              lineHeight: 1.6, marginBottom: 26, maxWidth: 480, textWrap: 'pretty' }}>
              Book a consultation to discuss your trading infrastructure and see how I can help.
            </p>
            <a href="contact.html" style={{ display: 'inline-flex', alignItems: 'center',
              fontFamily: FG, fontSize: 14.5, fontWeight: 600, color: a.c, background: '#fff',
              padding: '14px 28px', borderRadius: 8, textDecoration: 'none',
              transition: 'transform 180ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms ease' }}
              onMouseEnter={(e)=>{e.currentTarget.style.transform='translateY(-1px)';e.currentTarget.style.boxShadow='0 12px 28px rgba(0,0,0,0.22)';}}
              onMouseLeave={(e)=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='none';}}>
              Schedule consultation
            </a>
          </div>
        </div>
      </div>

      <style>{`@media (max-width: 720px){
        .howi-section { padding: 120px 22px 100px !important; }
        .howi-step { padding-left: 60px !important; }
        .howi-marker { left: 14px !important; }
        .howi-line { left: 20px !important; }
      }`}</style>
    </section>
  );
}

/* ============================================================ PROCESS */
function ProcessSection({ accent, id, showHeading = true }) {
  const steps = [
    { n: '01', title: 'Discovery call',
      desc: 'We map your current stack, goals, exchange access, and data requirements in a focused session — so the scope is grounded in what you actually need.',
      tags: ['Stack audit', 'Goals & constraints', 'Exchange access'] },
    { n: '02', title: 'Proposal & scope',
      desc: 'You get a clear document: deliverables, timeline, and a fixed price. No hourly billing, no surprises — you know exactly what you are getting up front.',
      tags: ['Deliverables', 'Timeline', 'Fixed pricing'] },
    { n: '03', title: 'Build & deploy',
      desc: 'I provision the servers, install MT5 and the data EAs, and wire your dashboard APIs into n8n — built, tested, and deployed straight to your environment.',
      tags: ['Servers provisioned', 'MT5 + data EAs', 'APIs & n8n wired'] },
    { n: '04', title: 'Handoff & support',
      desc: 'A full walkthrough, complete documentation, and 30 days of post-launch support — so you are never left guessing how your own infrastructure works.',
      tags: ['Documentation', 'Walkthrough session', '30-day support'] },
  ];
  return (
    <section id={id} style={{ background: PAPER[2], padding: '104px 32px' }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        {showHeading && (
          <SecHead accent={accent} center label="How I work" title="From first call to live infrastructure"
            sub="A clear, transparent process refined over every build — no black boxes, no surprises." />
        )}
        <div style={{ background: PAPER[0], border: `1px solid ${BORDER.subtle}`, borderRadius: 20,
          padding: 'clamp(28px,4vw,48px)', boxShadow: '0 1px 3px rgba(26,27,32,0.05), 0 14px 40px rgba(26,27,32,0.05)' }}>
          {steps.map((s, i) => (
            <PipelineStep key={s.n} accent={accent} n={s.n} title={s.title} desc={s.desc} tags={s.tags} last={i === steps.length - 1} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ MARKET DATA */
function MarketDataSection({ accent, id }) {
  const steps = [
    { n: '01', title: 'Provision your servers',
      desc: 'I set up a dedicated Ubuntu server to host your self-hosted dashboard and n8n, plus a Windows VPS to run MetaTrader 5 around the clock — bought and configured for you.',
      tags: ['Ubuntu VPS', 'Windows VPS', '24/7 uptime'] },
    { n: '02', title: 'Install MT5 + data EAs',
      desc: 'MetaTrader 5 runs on the Windows VPS with custom Expert Advisors that pull live market data, symbol info, and order flow straight from your broker feed.',
      tags: ['MetaTrader 5', 'Expert Advisors', 'broker feed'] },
    { n: '03', title: 'Stream into your dashboard',
      desc: 'The EAs push data via WebRequest into your dashboard, where it lands in a database and is exposed through clean REST APIs — market data, orders, symbol info, and more.',
      tags: ['WebRequest', 'REST API', 'self-hosted'] },
    { n: '04', title: 'Wire up n8n automation',
      desc: 'Your dashboard data flows into n8n through webhook triggers, so you can transform, route, and act on it inside any workflow you build — no glue code required.',
      tags: ['n8n', 'webhook trigger', 'workflows'] },
    { n: '05', title: 'Manipulate & extend',
      desc: 'From there the data is yours to shape — drive strategies, fire alerts, or connect AI agents into Claude and Cursor via MCP. However you want to use it.',
      tags: ['MCP', 'Claude', 'alerts', 'strategies'] },
  ];
  return (
    <section id={id} style={{ background: PAPER[1], padding: '104px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 64, alignItems: 'start' }} className="md-grid">
          <div style={{ position: 'sticky', top: 100 }} className="md-intro">
            <SectionLabel accent={accent}>Market data API</SectionLabel>
            <h2 style={{ fontFamily: FD, fontSize: 'clamp(30px,3.6vw,44px)', fontWeight: 700, color: INK[1],
              letterSpacing: '-0.03em', marginBottom: 18, lineHeight: 1.12 }}>
              How I build &amp; install your market data layer
            </h2>
            <p style={{ fontFamily: FB, fontSize: 16, color: INK[2], lineHeight: 1.6, marginBottom: 28 }}>
              The market data API is the foundation everything else sits on. I stand up the full
              self-hosted stack — from your broker feed all the way to automation you control.
            </p>
            <ArchDiagram accent={accent} />
          </div>
          <div>
            {steps.map((s, i) => (
              <PipelineStep key={s.n} accent={accent} n={s.n} title={s.title} desc={s.desc} tags={s.tags} last={i === steps.length - 1} />
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px){
        .md-grid{ grid-template-columns: 1fr !important; gap: 40px !important; }
        .md-intro{ position: static !important; }
      }`}</style>
    </section>
  );
}

/* ============================================================ DASHBOARD SUITE */
function DashboardSuiteSection({ accent, id }) {
  const a = acc(accent);
  const apis = [
    { icon: 'candlestick-chart', cat: 'Data', title: 'Market Data API', desc: 'Real-time & historical OHLCV straight from your MT5 broker feed.' },
    { icon: 'newspaper', cat: 'Data', title: 'News API', desc: 'Economic events and news data, synced and queryable.' },
    { icon: 'hash', cat: 'Data', title: 'Event ID Reference', desc: 'Every consistent event ID and its currencies, in one lookup.' },
    { icon: 'image', cat: 'Data', title: 'Chart Image API', desc: 'Server-rendered chart images on demand for any symbol or timeframe.' },
    { icon: 'info', cat: 'Data', title: 'Symbol Info API', desc: 'Advanced symbol-behaviour analysis and average calculations.' },
    { icon: 'link', cat: 'Data', title: 'URL API', desc: 'Fetch and extract text from any URL with multi-method auth.' },
    { icon: 'layout-grid', cat: 'Signals', title: 'Quarters Theory API', desc: 'Multi-timeframe quarter analysis for precision entry/exit timing.' },
    { icon: 'trending-up', cat: 'Signals', title: 'TMA + CG API', desc: 'Premium/discount zone detection with dynamic TMA bands.' },
    { icon: 'copy', cat: 'Signals', title: 'Similar Scene API', desc: 'Historical event patterns with synchronized multi-timeframe data.' },
    { icon: 'brain', cat: 'Intel', title: 'Markets Brain API', desc: '22-module neural brain — raw market-state scores for any symbol.' },
    { icon: 'clock', cat: 'Intel', title: 'Time Machine ML API', desc: 'HTF context snapshots for ML — live or any historical moment.' },
    { icon: 'arrow-left-right', cat: 'Execution', title: 'Orders API', desc: 'Complete MT5 trading operations — place, modify, and manage orders.' },
    { icon: 'shield', cat: 'Risk', title: 'Risk Management API', desc: 'Optimal SL & TP via ATR + swing points — scalp, swing, long-term.' },
  ];
  return (
    <section id={id} style={{ background: PAPER[2], padding: '104px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionLabel accent={accent}>Inside the dashboard</SectionLabel>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div>
            <h2 style={{ fontFamily: FD, fontSize: 'clamp(30px,3.6vw,44px)', fontWeight: 700, color: INK[1],
              letterSpacing: '-0.03em', marginBottom: 16, lineHeight: 1.12, maxWidth: 620 }}>
              One dashboard, every market signal
            </h2>
            <p style={{ fontFamily: FB, fontSize: 16, color: INK[2], lineHeight: 1.6, maxWidth: 560 }}>
              Your self-hosted dashboard ships a full suite of documented APIs — every one callable
              from n8n, your strategies, or an AI agent over MCP.
            </p>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: FB, fontSize: 12.5,
            fontWeight: 600, color: a.h, background: a.tint, border: `1px solid ${a.chip}`, borderRadius: 9999, padding: '8px 16px' }}>
            <i data-lucide="plug" style={{ width: 14, height: 14 }}></i>
            MCP server · 63 tools into Claude &amp; Cursor
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {apis.map(ap => <APICard key={ap.title} accent={accent} {...ap} />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ DASHBOARD PREVIEW (video) */
function DashboardPreviewSection({ accent, id, videoSrc = 'assets/dashboard.mp4' }) {
  return (
    <section id={id} style={{ background: PAPER[1], padding: '104px 32px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <SecHead accent={accent} center label="The dashboard"
          title="Every feed, every fill, on one pane"
          sub="A single command center for the whole stack — feeds, agents, orders, P&L — watchable at a glance." />
        <div style={{ borderRadius: 16, overflow: 'hidden', border: `1px solid ${BORDER.subtle}`, background: PAPER[0],
          boxShadow: '0 28px 64px rgba(26,27,32,0.12), 0 8px 16px rgba(26,27,32,0.05)' }}>
          <div style={{ display: 'flex', alignItems: 'center', padding: '12px 16px', background: PAPER[2],
            borderBottom: `1px solid ${BORDER.subtle}`, gap: 14 }}>
            <div style={{ display: 'flex', gap: 7 }}>
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }} />
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }} />
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }} />
            </div>
            <div style={{ flex: 1, textAlign: 'center', fontFamily: FB, fontSize: 12.5, color: INK[3],
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              tragentic · live operations
            </div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: FB, fontSize: 11,
              fontWeight: 600, color: UP, background: '#E8F2EB', border: '1px solid #BFE0CB', borderRadius: 9999, padding: '3px 10px' }}>
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: UP }} />
              Live
            </span>
          </div>
          <video src={videoSrc} autoPlay loop muted playsInline preload="metadata"
            style={{ display: 'block', width: '100%', height: 'auto', background: PAPER[2] }} />
        </div>
      </div>
    </section>
  );
}

/* ============================================================ FAQ */
function FAQSection({ accent, id }) {
  const a = acc(accent);
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: 'What exchanges do you support?', a: 'Binance, Bybit, OKX, Coinbase Advanced, Kraken, and most major CEXs via CCXT. DEX integrations (Uniswap, dYdX) available on request.' },
    { q: 'How long does a typical engagement take?', a: 'Market data setup typically takes 1–3 weeks depending on feed count and complexity. Full agentic workflow builds range from 3–8 weeks.' },
    { q: 'Do I need to be technical to work with you?', a: 'No. I handle all the infrastructure. You define the trading logic and requirements; I build the machinery that executes them.' },
    { q: 'What does "market data setup" actually include?', a: 'Exchange WebSocket/REST connections, feed normalization, OHLCV bar generation, tick storage (TimescaleDB or similar), data validation, and monitoring dashboards.' },
    { q: 'Is ongoing support available after the project ends?', a: 'Yes. Every engagement includes 30 days of post-launch support. Ongoing retainer arrangements are available for monitoring and maintenance.' },
    { q: 'How is pricing structured?', a: "Project-based pricing scoped after the discovery call. I don't charge by the hour — you get a fixed price for a defined scope." },
  ];
  return (
    <section id={id} style={{ background: PAPER[2], padding: '104px 32px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <SecHead accent={accent} label="FAQ" title="Common questions" />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ background: PAPER[0], borderRadius: 12,
              border: `1px solid ${open === i ? BORDER.strong : BORDER.subtle}`, transition: 'border-color 200ms',
              boxShadow: '0 1px 2px rgba(26,27,32,0.03)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', background: 'transparent',
                border: 'none', padding: '18px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                cursor: 'pointer', textAlign: 'left', gap: 16 }}>
                <span style={{ fontFamily: FD, fontSize: 16, fontWeight: 600, color: INK[1] }}>{f.q}</span>
                <span style={{ flexShrink: 0, color: open === i ? a.c : INK[4], fontSize: 22, lineHeight: 1,
                  transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 220ms cubic-bezier(0.22,1,0.36,1)' }}>+</span>
              </button>
              <div style={{ maxHeight: open === i ? 240 : 0, overflow: 'hidden', transition: 'max-height 280ms cubic-bezier(0.22,1,0.36,1)' }}>
                <div style={{ padding: '0 22px 20px', fontFamily: FB, fontSize: 14.5, color: INK[2], lineHeight: 1.65 }}>{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ AUTOMATIONS */
function AutomationsSection({ accent, id }) {
  const a = acc(accent);
  return (
    <section id={id} style={{ background: PAPER[1], padding: '104px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SecHead accent={accent} label="Automations" title="Workflows that run while you sleep"
          sub="A few of the autonomous workflows I build on top of your data layer. Each runs on its own schedule — no screens to babysit." maxW={640} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 18 }}>
          {AUTOMATIONS.map(item => (
            <div key={item.title} style={{ background: PAPER[0], border: `1px solid ${BORDER.subtle}`, borderRadius: 14,
              padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 14,
              boxShadow: '0 1px 3px rgba(26,27,32,0.05)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span style={{ fontFamily: FD, fontSize: 16.5, fontWeight: 700, color: INK[1], letterSpacing: '-0.01em', lineHeight: 1.3 }}>{item.title}</span>
                <span style={{ fontFamily: FB, fontSize: 11, fontWeight: 600, color: a.h, whiteSpace: 'nowrap', flexShrink: 0,
                  background: a.tint, border: `1px solid ${a.chip}`, borderRadius: 9999, padding: '3px 10px' }}>{item.trigger}</span>
              </div>
              <p style={{ fontFamily: FB, fontSize: 13.5, color: INK[3], lineHeight: 1.55, margin: 0 }}>{item.tagline}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 4 }}>
                {item.steps.map((step, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                    <span style={{ width: 18, height: 18, borderRadius: '50%', flexShrink: 0, marginTop: 1,
                      background: a.c, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <i data-lucide="check" style={{ width: 11, height: 11, color: '#fff' }}></i>
                    </span>
                    <span style={{ fontFamily: FB, fontSize: 13.5, color: INK[2], lineHeight: 1.4 }}>{step}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ CONTACT / BOOKING */
function ContactSection({ accent, id }) {
  const a = acc(accent);
  const chevron = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2382848C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")";
  return (
    <section id={id} style={{ background: PAPER[2], padding: '104px 32px' }}>
      <style>{`
        .ae-input{width:100%;background:#fff;border:1px solid ${BORDER.default};border-radius:10px;
          padding:11px 13px;color:${INK[1]};font-family:'Hanken Grotesk',sans-serif;font-size:14px;
          outline:none;transition:border-color 160ms,box-shadow 160ms;}
        .ae-input::placeholder{color:${INK[4]};}
        .ae-input:focus{border-color:var(--accent);
          box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);}
        .ae-textarea{resize:vertical;min-height:118px;line-height:1.55;}
        .ae-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
          background-image:${chevron};background-repeat:no-repeat;background-position:right 12px center;}
        .ae-select option{background:#fff;color:${INK[1]};}
        .ae-contact-grid{display:grid;grid-template-columns:0.82fr 1.18fr;}
        .ae-field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
        @media (max-width:880px){.ae-contact-grid{grid-template-columns:1fr;}}
        @media (max-width:520px){.ae-field-2{grid-template-columns:1fr;}}
      `}</style>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <SecHead accent={accent} center title={<span>Ready to build your <span style={{ color: a.c }}>edge?</span></span>}
          sub="Tell me about your setup and what you want to automate. I'll reply within 24 hours with where I can help." />

        <div className="ae-contact-grid" style={{ borderRadius: 20, overflow: 'hidden',
          border: `1px solid ${BORDER.subtle}`, boxShadow: '0 28px 64px rgba(26,27,32,0.10)' }}>

          {/* Left — dark ink block with quote + proof placeholders */}
          <div style={{ position: 'relative', minHeight: 520, padding: '40px 36px', display: 'flex',
            flexDirection: 'column', justifyContent: 'space-between', overflow: 'hidden',
            background: `radial-gradient(70% 50% at 20% 0%, ${a.a20} 0%, transparent 70%), ${PAPER.dark}` }}>
            <span style={{ position: 'absolute', top: 16, right: 16, fontFamily: FB, fontSize: 10.5,
              fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(244,243,239,0.4)',
              border: '1px dashed rgba(244,243,239,0.25)', borderRadius: 6, padding: '4px 9px' }}>image placeholder</span>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{ fontFamily: FS, fontSize: 46, lineHeight: 1, color: a.soft, marginBottom: 8 }}>“</div>
              <p style={{ fontFamily: FS, fontSize: 23, fontWeight: 400, color: '#F4F3EF', lineHeight: 1.4,
                maxWidth: 360, letterSpacing: '-0.01em', textWrap: 'pretty' }}>
                A short client quote will live here once you've got one to share.
              </p>
              <div style={{ fontFamily: FB, fontSize: 13, color: 'rgba(244,243,239,0.65)', marginTop: 16 }}>— Client name, role</div>
            </div>
            <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', gap: 24 }}>
              <div style={{ width: 132, height: 38, borderRadius: 8, border: '1px dashed rgba(244,243,239,0.25)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FB, fontSize: 11,
                fontWeight: 600, color: 'rgba(244,243,239,0.4)', letterSpacing: '0.05em' }}>logo</div>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                {['metric', 'metric', 'metric'].map((m, i) => (
                  <div key={i} style={{ flex: '1 1 80px', minWidth: 0, borderRadius: 8,
                    border: '1px dashed rgba(244,243,239,0.18)', padding: '12px 12px' }}>
                    <div style={{ fontFamily: FD, fontSize: 20, fontWeight: 800, color: 'rgba(244,243,239,0.4)' }}>—</div>
                    <div style={{ fontFamily: FB, fontSize: 10.5, color: 'rgba(244,243,239,0.4)', marginTop: 4 }}>{m}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right — form */}
          <div style={{ background: PAPER[0], padding: '40px 36px' }}>
            <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div className="ae-field-2">
                <Field label="First name" required><AEInput placeholder="John" /></Field>
                <Field label="Last name" required><AEInput placeholder="Smith" /></Field>
              </div>
              <div className="ae-field-2">
                <Field label="Email" required><AEInput type="email" placeholder="john@email.com" /></Field>
                <Field label="Company / fund"><AEInput placeholder="Optional" /></Field>
              </div>
              <div className="ae-field-2">
                <Field label="What do you trade?" required>
                  <AESelect placeholder="Select markets" options={['Crypto', 'Forex', 'Equities', 'Futures', 'Multiple']} />
                </Field>
                <Field label="Capital range">
                  <AESelect placeholder="Select range" options={['Under $50k', '$50k – $250k', '$250k – $1M', '$1M+', 'Prefer not to say']} />
                </Field>
              </div>
              <Field label="Your role" required>
                <AESelect placeholder="Select your role" options={['Independent trader', 'Fund / asset manager', 'Prop desk', 'Developer / quant', 'Other']} />
              </Field>
              <div className="ae-field-2">
                <Field label="Phone (optional)"><AEInput type="tel" placeholder="+1 (555) 000-0000" /></Field>
                <Field label="How can I help?" required>
                  <AESelect placeholder="Select topic" options={['Market Data Setup', 'Agentic Trading Workflows', 'Front-End AI Assistant', 'Custom Automation', 'Not sure yet']} />
                </Field>
              </div>
              <Field label="Budget" required>
                <AESelect placeholder="Select budget range" options={['Under $5k', '$5k – $15k', '$15k – $40k', '$40k+', "Let's discuss"]} />
              </Field>
              <Field label="Message" required>
                <AETextarea placeholder="Tell me about your setup, goals, and what you're hoping to automate…" />
              </Field>
              <Field label="How did you hear about me?">
                <AEInput placeholder="Referral, X/Twitter, YouTube…" />
              </Field>
              <CTAButton accent={accent}>Submit inquiry →</CTAButton>
              <div style={{ fontFamily: FB, fontSize: 12, color: INK[4], textAlign: 'center', lineHeight: 1.5 }}>
                By submitting, you agree to the{' '}
                <span style={{ color: INK[2], textDecoration: 'underline', cursor: 'pointer' }}>Privacy Policy</span>{' '}and{' '}
                <span style={{ color: INK[2], textDecoration: 'underline', cursor: 'pointer' }}>Terms of Service</span>.
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ CASE STUDY */
function CaseStudySection({ accent, id }) {
  const a = acc(accent);
  return (
    <section id={id} style={{ background: PAPER[1], padding: '88px 32px' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        {/* Testimonial video — placeholder until the recording from Moyn is ready */}
        <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', borderRadius: 18, overflow: 'hidden',
          border: `1px solid ${BORDER.subtle}`, background: PAPER.dark,
          boxShadow: '0 28px 64px rgba(26,27,32,0.12)', display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', gap: 20 }}>
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
            background: `radial-gradient(60% 60% at 50% 42%, ${a.a20} 0%, transparent 70%)` }} />
          <span style={{ position: 'absolute', top: 18, left: 18, display: 'inline-flex', alignItems: 'center', gap: 7,
            fontFamily: FB, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', color: a.soft,
            background: 'rgba(244,243,239,0.08)', border: '1px solid rgba(244,243,239,0.18)', borderRadius: 8, padding: '5px 10px' }}>
            Video testimonial
          </span>
          <div style={{ position: 'relative', width: 76, height: 76, borderRadius: '50%', border: '1.5px solid rgba(244,243,239,0.3)',
            background: 'rgba(244,243,239,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 0, height: 0, marginLeft: 5, borderTop: '13px solid transparent',
              borderBottom: '13px solid transparent', borderLeft: `20px solid ${a.soft}` }} />
          </div>
          <div style={{ position: 'relative', textAlign: 'center' }}>
            <div style={{ fontFamily: FD, fontSize: 17, fontWeight: 700, color: '#F4F3EF' }}>Moyn · Founder &amp; CEO, Elite Traders Academy</div>
            <div style={{ fontFamily: FB, fontSize: 12.5, color: 'rgba(244,243,239,0.5)', marginTop: 6 }}>Testimonial coming soon</div>
          </div>
        </div>

        <div style={{ marginTop: 44, maxWidth: 680 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 28 }}>
            <div style={{ background: PAPER[0], border: `1px solid ${BORDER.subtle}`, borderRadius: 12, padding: '8px 12px',
              display: 'flex', alignItems: 'center', flexShrink: 0, boxShadow: '0 1px 3px rgba(26,27,32,0.06)' }}>
              <img src="assets/elite-traders-logo.png" alt="Elite Traders Academy" style={{ height: 38, width: 'auto', display: 'block' }} />
            </div>
            <div>
              <div style={{ fontFamily: FD, fontSize: 17, fontWeight: 700, color: INK[1], whiteSpace: 'nowrap' }}>Elite Traders Academy</div>
              <div style={{ fontFamily: FB, fontSize: 13, color: INK[3], marginTop: 4 }}>EliteTraders.Academy</div>
            </div>
          </div>

          <div style={{ fontFamily: FB, fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK[4], marginBottom: 16 }}>Overview</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, fontFamily: FB, fontSize: 16, lineHeight: 1.7, color: INK[2] }}>
            <p style={{ textWrap: 'pretty' }}>
              Moyn had spent <span style={{ color: INK[1], fontWeight: 600 }}>15 years</span> refining his own trading
              system by hand. For years he'd tried to automate it with an MQL4/MQL5 developer — and it never quite came together.
            </p>
            <p style={{ textWrap: 'pretty' }}>
              Within the <span style={{ color: INK[1], fontWeight: 600 }}>first month</span>, I had him a conversational,
              ChatGPT-style front end: he can talk to it in plain language, ask it to place trades on his behalf, and it already knows his entire system.
            </p>
            <p style={{ textWrap: 'pretty' }}>
              I also integrated all of his market data — every indicator he relies on, including the
              <span style={{ color: INK[1], fontWeight: 600 }}> custom indicators</span> I rebuilt for him from scratch.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ PAGE HEADER */
function PageHeader({ accent, badge, title, sub }) {
  const a = acc(accent);
  return (
    <section style={{ position: 'relative', overflow: 'hidden',
      background: `radial-gradient(70% 60% at 50% -10%, ${a.tint} 0%, transparent 65%), ${PAPER[1]}`,
      padding: '144px 32px 72px', borderBottom: `1px solid ${BORDER.subtle}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionLabel accent={accent}>{badge}</SectionLabel>
        <h1 style={{ fontFamily: FD, fontSize: 'clamp(38px,5vw,68px)', fontWeight: 800, color: INK[1],
          letterSpacing: '-0.04em', lineHeight: 1.04, marginBottom: sub ? 20 : 0, maxWidth: 800, textWrap: 'balance' }}>
          {title}
        </h1>
        {sub && <p style={{ fontFamily: FB, fontSize: 18, color: INK[2], lineHeight: 1.6, maxWidth: 620 }}>{sub}</p>}
      </div>
    </section>
  );
}

/* ============================================================ CTA STRIP */
function CTAStrip({ accent }) {
  const a = acc(accent);
  return (
    <section style={{ background: PAPER[1], padding: '96px 32px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', overflow: 'hidden',
        background: PAPER.dark, borderRadius: 28, padding: 'clamp(48px,7vw,88px) 40px', textAlign: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(50% 70% at 50% 0%, ${a.a20} 0%, transparent 70%)` }} />
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 2,
            background: 'rgba(244,243,239,0.08)', border: '1px solid rgba(244,243,239,0.16)', borderRadius: 9999, padding: '6px 15px' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: a.soft }} />
            <span style={{ fontFamily: FB, fontSize: 12.5, fontWeight: 500, color: 'rgba(244,243,239,0.85)' }}>Accepting new clients</span>
          </div>
          <h2 style={{ fontFamily: FD, fontSize: 'clamp(30px,4.4vw,52px)', fontWeight: 800, color: '#F4F3EF',
            letterSpacing: '-0.04em', lineHeight: 1.06, textWrap: 'balance' }}>
            Ready to build your edge?
          </h2>
          <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(244,243,239,0.7)', lineHeight: 1.6, maxWidth: 500 }}>
            Tell me about your setup. I'll reply within 24 hours with exactly where I can help.
          </p>
          <CTAButton accent={accent} href="contact.html" icon="calendar">Book a call</CTAButton>
        </div>
      </div>
    </section>
  );
}

window.Object.assign(window, {
  AUTOMATIONS, SecHead, HeroSection, LogoWallSection, ProblemSection, ServicesSection, ServicesHomeSection,
  AutomationsSection, ProcessSection, HowIWorkSection, MarketDataSection, DashboardSuiteSection, DashboardPreviewSection,
  FAQSection, ContactSection, CaseStudySection, PageHeader, CTAStrip,
});