// Sections — Hero, WhatWeDo, HowWeWork, Results, About, Final, Footer
const { useState, useEffect, useMemo } = React;

// ───────────────────── NAV ─────────────────────
function Nav({ onBookConsult }) {
  return (
    <div className="nav-wrap">
      <div className="wrap nav">
        <div className="brand">
          <svg className="brand-mark" aria-hidden="true" viewBox="0 0 22 22" width="22" height="22" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round">
            <line x1="9" y1="2" x2="9" y2="20"/><line x1="9" y1="11" x2="2" y2="2"/><line x1="9" y1="11" x2="2" y2="20"/>
            <line x1="13" y1="2" x2="13" y2="20"/><line x1="13" y1="11" x2="20" y2="2"/><line x1="13" y1="11" x2="20" y2="20"/>
          </svg>
          <div className="brand-name">Ikko Systems Inc.</div>
        </div>
        <nav className="nav-links">
          <a href="#what">What we do</a>
          <a href="#approach">Approach</a>
          <a href="#results">Results</a>
          <a href="#about">About</a>
        </nav>
        <div className="nav-cta">
          <a className="btn btn-ghost" href="#approach" style={{ height: 36, padding: '0 14px', fontSize: 13.5 }}>
            See how we work
          </a>
          <a className="btn btn-primary" onClick={onBookConsult} style={{ height: 36, padding: '0 14px', fontSize: 13.5 }}>
            Book a consultation
            <IconArrow />
          </a>
        </div>
      </div>
    </div>);

}

// ───────────────────── PROCESS DIAGRAM (right column) ─────────────────────
//
// Static diagram: BEFORE (messy graph) on the left, AFTER (clean line) on the right.
// Animated subtly: messy edges drift their dashes; a single accent bridge traces
// across the axis on first paint. Margin notes are illustrative ("e.g. ...") since
// this is for a brand-new consulting practice with no published case studies yet.

function ProcessDiagram() {
  const mobile = typeof window !== 'undefined' && window.innerWidth <= 820;
  const charW = mobile ? 10.5 : 7;
  const minW  = mobile ? 80  : 62;

  // BEFORE-side messy nodes (positions in viewBox 0..360 horizontal × 0..280 vertical)
  const before = [
    { id: 'a', x:  40, y:  60, t: 'EMAIL SARAH' },
    { id: 'b', x: 120, y:  40, t: 'CHECK SHEET' },
    { id: 'c', x:  60, y: 120, t: 'WAIT' },
    { id: 'd', x: 150, y: 110, t: 'RE-KEY' },
    { id: 'e', x:  40, y: 200, t: 'FIND PO' },
    { id: 'f', x: 130, y: 180, t: 'APPROVE?' },
    { id: 'g', x: 200, y:  70, t: 'SLACK OPS' },
    { id: 'h', x: 220, y: 150, t: 'DUPE CHECK' },
    { id: 'i', x: 200, y: 230, t: 'EXPORT CSV' },
    { id: 'j', x: 290, y: 200, t: 'RECONCILE' },
  ];
  const byId = Object.fromEntries(before.map((n) => [n.id, n]));

  // Tangled edges; some loops back, some cross
  const edges = [
    ['a','b'], ['a','c'], ['b','d'], ['c','d'], ['c','e'],
    ['d','f'], ['e','f'], ['b','g'], ['d','g'], ['g','h'],
    ['f','h'], ['h','d'], ['e','i'], ['i','f'], ['f','j'],
    ['h','j'], ['g','d'], ['j','h'],
  ];

  // AFTER side (right of axis, viewBox x ≈ 480..800)
  const after = [
    { x: 530, y: 140, t: 'INTAKE' },
    { x: 640, y: 140, t: 'RESOLVE' },
    { x: 750, y: 140, t: 'LOG' },
  ];

  return (
    <div className="pdiag">
      <div className="pdiag-head">
        <div className="ttl">A typical engagement</div>
        <div className="meta">Before · After</div>
      </div>

      <svg viewBox="-8 0 808 320" preserveAspectRatio="xMidYMid meet">
        {/* dashed vertical axis between the two halves */}
        <g className="pd-stage-3">
          <line className="pd-axis" x1="430" y1="40" x2="430" y2="290" />
          <text className="pd-axis-lbl" x="430" y="30" textAnchor="middle">After →</text>
        </g>

        {/* BEFORE side — messy edges (drift) */}
        <g className="pd-stage-2">
          {edges.map(([from, to], i) => {
            const a = byId[from], b = byId[to];
            // mid-curve through a slight random offset for organic feel — deterministic
            const mx = (a.x + b.x) / 2 + ((i * 17) % 30 - 15);
            const my = (a.y + b.y) / 2 + ((i * 23) % 26 - 13);
            return (
              <path key={i} className="pd-edge drift"
                    d={`M${a.x},${a.y} Q${mx},${my} ${b.x},${b.y}`}
                    style={{ animationDelay: `${-(i * 0.7)}s` }} />
            );
          })}
        </g>

        {/* BEFORE nodes */}
        <g className="pd-stage-1">
          {before.map((n) => {
            const w = Math.max(minW, n.t.length * charW + 14);
            return (
              <g key={n.id} transform={`translate(${n.x - w / 2},${n.y - 13})`}>
                <rect className="pd-node" width={w} height="26" rx="4" />
                <text className="pd-node-tx" x={w / 2} y="17" textAnchor="middle">{n.t}</text>
              </g>
            );
          })}
        </g>

        {/* Bridge line: animates across the axis on first view */}
        <g className="pd-stage-3">
          <path className="pd-bridge"
                d="M340,140 C390,140 430,140 480,140" />
        </g>

        {/* AFTER side — clean linear flow */}
        <g className="pd-stage-3">
          <line className="pd-edge" x1="556" y1="140" x2="614" y2="140" style={{opacity:0.7}} />
          <line className="pd-edge" x1="666" y1="140" x2="724" y2="140" style={{opacity:0.7}} />
        </g>
        <g className="pd-stage-3">
          {after.map((n, i) => {
            const w = Math.max(minW, n.t.length * charW + 14);
            return (
              <g key={i} transform={`translate(${n.x - w / 2},${n.y - 13})`}>
                <rect className="pd-clean-node" width={w} height="26" rx="5" />
                <text className="pd-clean-tx" x={w / 2} y="17" textAnchor="middle">{n.t}</text>
              </g>
            );
          })}
        </g>

        {/* Margin notes — left side (BEFORE) */}
        <g className="pd-stage-4">
          <line className="pd-margin-tick" x1="20" y1="265" x2="380" y2="265" />
          <text className="pd-margin" x="20" y="285">
            <tspan className="em">e.g. 12 handoffs</tspan>
            <tspan dx="14" dy="0">·</tspan>
            <tspan dx="10">2.3 days avg</tspan>
            <tspan dx="14">·</tspan>
            <tspan dx="10">manual</tspan>
          </text>
        </g>

        {/* Margin notes — right side (AFTER) */}
        <g className="pd-stage-4">
          <line className="pd-margin-tick" x1="476" y1="265" x2="780" y2="265" />
          <text className="pd-margin" x="476" y="285">
            <tspan className="em">1 handoff</tspan>
            <tspan dx="14">·</tspan>
            <tspan dx="10">~4 min</tspan>
            <tspan dx="14">·</tspan>
            <tspan dx="10">automated</tspan>
          </text>
        </g>
      </svg>
    </div>
  );
}

// ───────────────────── HERO ─────────────────────
function Hero({ headlineVariant, onBookConsult }) {
  const headlines = {
    practical: { a: 'Practical AI.', b: 'Measurable Results.' },
    measurable: { a: 'AI that creates', b: 'measurable business results.' },
    operators: { a: 'AI for serious', b: 'operators.' }
  };
  const h = headlines[headlineVariant] || headlines.practical;

  return (
    <section className="hero">
      <div className="noise" />
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <h1 style={{ marginTop: 22 }}>
              {h.a}<br />
              <span className="accent">{h.b}</span>
            </h1>
            <p className="sub">
              We help businesses reduce costs, improve operations, and scale faster
              using practical AI solutions, not hype.
            </p>
            <p className="sup">
              No fluff. No unnecessary complexity. Just smart implementation, automation,
              and systems that create real business value.
            </p>
            <div className="ctas">
              <a className="btn btn-primary" onClick={onBookConsult}>
                Book a consultation
                <IconArrow />
              </a>
              <a className="btn btn-ghost" href="#approach">
                See how we work
              </a>
            </div>
          </div>
          <div>
            <ProcessDiagram />
          </div>
        </div>

        
      </div>
    </section>);

}

// ───────────────────── WHAT WE DO ─────────────────────
const CAPABILITIES = [
{ n: '01', icon: 'IconAutomation', title: 'Process automation', desc: 'Eliminate manual handoffs between tools, teams, and systems. We rebuild the work, not just wrap it.' },
{ n: '02', icon: 'IconSupport', title: 'Customer support workflows', desc: 'Triage, drafting, and routing that lets a small team carry the volume of a large one, without lowering quality.' },
{ n: '03', icon: 'IconOps', title: 'Internal operations', desc: 'Quietly fix the parts of the business that leak time and money: reconciliation, reporting, status, scheduling.' },
{ n: '04', icon: 'IconSales', title: 'Sales &amp; lead handling', desc: 'Faster qualification, cleaner enrichment, follow-up that doesn&rsquo;t fall through. Built into your existing CRM.' },
{ n: '05', icon: 'IconAnalytics', title: 'Reporting &amp; analytics', desc: 'The numbers leadership actually asks for, generated on demand and explained in plain language.' },
{ n: '06', icon: 'IconAssistant', title: 'Custom AI tools', desc: 'Internal assistants and copilots wired into your data, your processes, and your way of working.' },
{ n: '07', icon: 'IconCost', title: 'Operational cost reduction', desc: 'A clear plan for the work that no longer needs a person, with the numbers to back the recommendation.' }];


function WhatWeDo({ onBookConsult }) {
  return (
    <section className="block" id="what">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">What we do</div>
            <h2 style={{ marginTop: 18 }}>Practical AI solutions for growing businesses.</h2>
          </div>
          <p className="lede">
            We help businesses identify where AI creates real leverage, usually in the
            unglamorous places where the work is repetitive, expensive, or slow.
          </p>
        </div>

        <div className="cap-grid">
          {CAPABILITIES.map((c) => {
            const Icon = window[c.icon];
            return (
              <div className="cap" key={c.n}>
                <div className="icon"><Icon size={22} /></div>
                <div className="cap-num mono">{c.n}</div>
                <h3 dangerouslySetInnerHTML={{ __html: c.title }} />
                <p dangerouslySetInnerHTML={{ __html: c.desc }} />
              </div>);

          })}
          <div className="cap" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', background: 'transparent' }}>
            <div>
              <div className="cap-num mono">+</div>
              <h3 style={{ marginTop: 18 }}>Don&rsquo;t see your problem?</h3>
              <p>If it&rsquo;s repetitive, expensive, or slow, it&rsquo;s usually worth a conversation. The first 30 minutes are free.</p>
            </div>
            <a className="btn-link" style={{ marginTop: 22 }} onClick={onBookConsult}>Start a conversation <IconArrow /></a>
          </div>
        </div>
      </div>
    </section>);

}

// ───────────────────── HOW WE WORK ─────────────────────
const STEPS = [
{ n: 'Step 01', title: 'Identify waste', desc: 'We sit with your team and map where time, money, and manual effort are being lost. Nothing is built until we agree on what&rsquo;s worth fixing.', tag: 'Week 1 · Discovery' },
{ n: 'Step 02', title: 'Build practical solutions', desc: 'We implement targeted AI systems that solve specific business problems. No platform sales. No unnecessary complexity.', tag: 'Week 2–6 · Implementation' },
{ n: 'Step 03', title: 'Measure results', desc: 'Every project is tied to operational improvement, savings, or growth, and reported against the baseline we agreed on.', tag: 'Ongoing · Measurement' }];


function HowWeWork() {
  return (
    <section className="block alt" id="approach">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Our approach</div>
            <h2 style={{ marginTop: 18 }}>Operational discipline, end&#8209;to&#8209;end.</h2>
          </div>
          <p className="lede">
            Three steps, in order. We don&rsquo;t skip the first one, and we don&rsquo;t
            pretend the third one doesn&rsquo;t matter.
          </p>
        </div>

        <div className="process">
          {STEPS.map((s, i) =>
          <div className="step" key={i}>
              <div className="step-num mono">{s.n}</div>
              <h3>{s.title}</h3>
              <div className="step-rule" />
              <p dangerouslySetInnerHTML={{ __html: s.desc }} />
              <div className="step-tag">
                <span className="dot" />
                {s.tag}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───────────────────── RESULTS ─────────────────────
const OUTCOMES = [
{ n: '01', label: 'Faster response times', meta: 'Hours → minutes' },
{ n: '02', label: 'Reduced manual work', meta: 'Eliminated, not delegated' },
{ n: '03', label: 'Lower operational costs', meta: 'Per-unit and total' },
{ n: '04', label: 'Better decision-making', meta: 'Numbers leadership trusts' },
{ n: '05', label: 'Scalable internal systems', meta: 'Volume without headcount' },
{ n: '06', label: 'Higher margins through efficiency', meta: 'Compounds quarter on quarter' }];


function Results() {
  return (
    <section className="block" id="results">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Outcomes</div>
            <h2 style={{ marginTop: 18 }}>What clients actually care about.</h2>
          </div>
          <p className="lede">
            We measure the things operators measure. Not impressions, not engagement,
            not &ldquo;AI maturity.&rdquo; Cost, throughput, margin, time.
          </p>
        </div>

        <div className="results">
          <div className="results-list">
            {OUTCOMES.map((o) =>
            <div className="result-row" key={o.n}>
                <div className="num mono">{o.n}</div>
                <div className="label">{o.label}</div>
                <div className="meta mono">{o.meta}</div>
              </div>
            )}
          </div>
          <div className="results-side">
            <div className="label">How we scope an engagement</div>
            <h3 style={{marginTop: 10, fontSize: 22, letterSpacing:'-0.02em', lineHeight: 1.2}}>
              Every engagement starts with a baseline.
            </h3>
            <p className="desc" style={{marginTop: 12}}>
              We don&rsquo;t pitch outcomes we can&rsquo;t measure. Before any work begins, we agree
              on what the current process costs in time and money&mdash;and what success looks like.
            </p>
            <div style={{marginTop: 22, display: 'flex', flexDirection: 'column', gap: 14}}>
              {[
                {k:'01', t:'Map the current state', d:'Time, cost, error rate, throughput.'},
                {k:'02', t:'Agree on the target',   d:'Specific, measurable, signed off.'},
                {k:'03', t:'Build &amp; instrument', d:'Same metrics, before and after.'},
                {k:'04', t:'Report against baseline', d:'Honest numbers, not narrative.'},
              ].map((r) => (
                <div key={r.k} style={{display:'grid', gridTemplateColumns:'34px 1fr', gap: 10, alignItems:'baseline'}}>
                  <div className="mono" style={{fontSize: 11, color: 'var(--accent)', letterSpacing:'0.04em'}}>{r.k}</div>
                  <div>
                    <div style={{fontFamily:"'Inter Tight', sans-serif", fontWeight:500, fontSize: 14.5, letterSpacing:'-0.01em', color: 'var(--ink)'}} dangerouslySetInnerHTML={{__html: r.t}} />
                    <div style={{fontSize: 13, color: 'var(--ink-2)', marginTop: 2}} dangerouslySetInnerHTML={{__html: r.d}} />
                  </div>
                </div>
              ))}
            </div>
            <p className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 22, letterSpacing: '0.04em' }}>
              METHOD &middot; APPLIED EVERY ENGAGEMENT
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// ───────────────────── ABOUT ─────────────────────
function About() {
  return (
    <section className="block alt" id="about">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">About</div>
            <h2 style={{ marginTop: 18 }}>About Ikko Systems.</h2>
          </div>
          <p className="lede">
            Implementation over presentation. Outcomes over trends.
          </p>
        </div>

        <div className="about">
          <div>
            <p>
              Ikko Systems helps businesses apply AI where it matters
              most: operations, efficiency, and growth.
            </p>
            <p>
              We focus on implementation over presentation, and outcomes over trends.
              Our goal is simple: help clients use technology to work smarter, reduce
              waste, and build stronger businesses.
            </p>
            <p>
              We work in small, senior engagements. No layered teams, no junior staff
              learning on your budget. The person who scopes the work is the person
              who builds it.
            </p>
          </div>
          <div className="about-card">
            <div className="row"><div className="k">Practice</div><div className="v">AI implementation &amp; operations</div></div>
            <div className="row"><div className="k">Engagement</div><div className="v">Fixed-scope, fixed-fee, 2–8 weeks</div></div>
            <div className="row"><div className="k">Stack</div><div className="v">Whatever you already use, where possible</div></div>
            <div className="row"><div className="k">Reporting</div><div className="v">Tied to a baseline you sign off on</div></div>
            <div className="row"><div className="k">Not for</div><div className="v">Pilots, demos, &ldquo;AI strategy&rdquo; decks</div></div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────────────────── FINAL CTA ─────────────────────
function FinalCTA({ onBookConsult }) {
  return (
    <section className="final" id="contact">
      <div className="noise" />
      <div className="wrap final-inner">
        <div className="eyebrow">Let&rsquo;s talk</div>
        <h2 style={{ marginTop: 22 }}>
          If you&rsquo;re looking for <br/> practical AI <br />
          that improves your business,<br/><span className="accent">we should talk.</span>
        </h2>
        <p>
          Not another strategy deck. A 30-minute conversation about where the work
          actually is, and whether we&rsquo;re the right people to help you fix it.
        </p>
        <div className="ctas">
          <a className="btn btn-primary" onClick={onBookConsult}>
            Schedule a consultation
            <IconArrow />
          </a>
          <a className="btn btn-ghost" href="mailto:hello@ikkosystems.com">
            hello@ikkosystems.com
          </a>
        </div>
      </div>
    </section>);

}

// ───────────────────── FOOTER ─────────────────────
function Footer({ onBookConsult }) {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="brand">
              <svg className="brand-mark" aria-hidden="true" viewBox="0 0 22 22" width="22" height="22" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round">
            <line x1="9" y1="2" x2="9" y2="20"/><line x1="9" y1="11" x2="2" y2="2"/><line x1="9" y1="11" x2="2" y2="20"/>
            <line x1="13" y1="2" x2="13" y2="20"/><line x1="13" y1="11" x2="20" y2="2"/><line x1="13" y1="11" x2="20" y2="20"/>
          </svg>
              <div className="brand-name">Ikko Systems</div>
            </div>
            <p className="legal">
              Practical AI consulting. We help businesses reduce costs, improve
              operations, and scale, measured against the numbers that matter.
            </p>
          </div>
          <div>
            <h4>Practice</h4>
            <ul>
              <li><a href="#what">What we do</a></li>
              <li><a href="#approach">Our approach</a></li>
              <li><a href="#results">Outcomes</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="mailto:hello@ikkosystems.com">hello@ikkosystems.com</a></li>
              <li><a onClick={onBookConsult} style={{cursor:'pointer'}}>Book a consultation</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Ikko Systems Inc.</div>
          <div className="foot-legal-links">
            <a href="/privacy.html">Privacy Policy</a>
            <span>·</span>
            <a href="/terms.html">Terms &amp; Conditions</a>
          </div>
          <div className="mono">PRACTICAL AI · MEASURABLE RESULTS</div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, ProcessDiagram, WhatWeDo, HowWeWork, Results, About, FinalCTA, Footer });