// Landing-page sections beyond the hero. All driven by --iki-bg / --iki-fg / --iki-card vars.

// ---------- helpers ----------
const ikiFont = '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif';
const ikiHair = '1px solid color-mix(in oklab, var(--iki-fg) 14%, transparent)';
const ikiHairStrong = '1px solid color-mix(in oklab, var(--iki-fg) 28%, transparent)';
const ikiHairDark = '1px solid color-mix(in oklab, var(--iki-bg) 22%, transparent)';

function SectionLabel({ index, label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
      opacity: 0.6, fontFamily: ikiFont
    }}>
      <span style={{ fontFeatureSettings: '"tnum"' }}>§ {index}</span>
      <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.5 }} />
      <span>{label}</span>
    </div>);

}

// ============================================================
// 3. PRESS / CREDIBILITY STRIP — removed (private beta)
// ============================================================
function PressStrip() {return null;}

// ============================================================
// 4. STATS
// ============================================================
function StatsSection() {
  const stats = [
  { n: '6', label: 'AU retailers supported', sub: 'Kmart · Big W · Target · EB Games · Costco · Toymate' },
  { n: '$200k+', label: 'Secured across 3 drops', sub: 'Cumulative cart value through the closed beta' },
  { n: '6', label: 'Closed-beta operators', sub: 'Hand-picked from our Discord waiting room' }];

  return (
    <section style={{
      background: 'var(--iki-fg)', color: 'var(--iki-bg)',
      padding: '120px 56px', fontFamily: ikiFont,
      borderTop: ikiHairDark, borderBottom: ikiHairDark
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 72 }}>
        <SectionLabel index="03" label="By the numbers" />
        <span style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          Last 30 days
        </span>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0
      }}>
        {stats.map((s, i) =>
        <div key={i} style={{
          paddingRight: 32,
          borderLeft: i === 0 ? 'none' : '1px solid color-mix(in oklab, var(--iki-bg) 18%, transparent)',
          paddingLeft: i === 0 ? 0 : 40
        }}>
            <div style={{
            fontSize: 'clamp(72px, 8.5vw, 140px)',
            lineHeight: 0.92, fontWeight: 700, letterSpacing: '-0.04em'
          }}>
              {s.n}
            </div>
            <div style={{
            marginTop: 18,
            fontSize: 13, letterSpacing: '0.16em', textTransform: 'uppercase',
            opacity: 0.75, fontWeight: 600
          }}>
              {s.label}
            </div>
            <div style={{ marginTop: 8, fontSize: 14, opacity: 0.6, lineHeight: 1.5, maxWidth: 320 }}>
              {s.sub}
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ============================================================
// 5. FEATURES — 6 cards in 3x2
// ============================================================
function FeatureIcon({ kind }) {
  // Tiny abstract glyphs — geometric only, never pictographic
  const s = 32;
  const stroke = 'currentColor';
  const props = { width: s, height: s, viewBox: '0 0 32 32', fill: 'none', stroke, strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'lightning':return (
        <svg {...props}><path d="M19 4 L8 18 L15 18 L13 28 L24 14 L17 14 Z" /></svg>);

    case 'monitor':return (
        <svg {...props}>
        <circle cx="16" cy="16" r="11" />
        <circle cx="16" cy="16" r="5" />
        <path d="M16 5 L16 9 M16 23 L16 27 M5 16 L9 16 M23 16 L27 16" />
      </svg>);

    case 'shield':return (
        <svg {...props}>
        <path d="M16 4 L26 8 V16 C26 22 21 27 16 28 C11 27 6 22 6 16 V8 Z" />
        <path d="M11 16 L15 20 L21 12" />
      </svg>);

    case 'profile':return (
        <svg {...props}>
        <rect x="5" y="6" width="22" height="20" rx="2" />
        <path d="M5 12 L27 12" />
        <path d="M9 18 L15 18 M9 22 L19 22" />
        <circle cx="22" cy="19" r="2.5" />
      </svg>);

    case 'analytics':return (
        <svg {...props}>
        <path d="M5 27 L5 5 L27 5 L27 27 Z" />
        <path d="M9 22 L9 18 M14 22 L14 13 M19 22 L19 16 M24 22 L24 10" />
      </svg>);

    case 'updates':return (
        <svg {...props}>
        <path d="M27 16 A11 11 0 1 1 23 8" />
        <path d="M27 4 L27 10 L21 10" />
      </svg>);

    default:return null;
  }
}

function FeatureCard({ kind, title, body, idx }) {
  return (
    <article style={{
      background: 'var(--iki-fg)', color: 'var(--iki-bg)',
      borderRadius: 12, padding: '36px 32px 32px',
      display: 'flex', flexDirection: 'column', gap: 20,
      minHeight: 280, position: 'relative',
      fontFamily: ikiFont,
      transition: 'transform 320ms cubic-bezier(.2,.7,.3,1), box-shadow 320ms ease'
    }}
    onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 20px 50px -25px rgba(0,0,0,0.35)';}}
    onMouseLeave={(e) => {e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';}}>
      
      <div style={{
        position: 'absolute', top: 20, right: 24,
        fontSize: 10, letterSpacing: '0.18em', opacity: 0.4
      }}>
        0{idx}
      </div>
      <div style={{ color: 'var(--iki-bg)' }}>
        <FeatureIcon kind={kind} />
      </div>
      <h3 style={{
        margin: 0, fontSize: 22, fontWeight: 700,
        letterSpacing: '-0.02em', lineHeight: 1.15
      }}>
        {title}
      </h3>
      <p style={{
        margin: 0, fontSize: 15, lineHeight: 1.55, opacity: 0.72
      }}>
        {body}
      </p>
    </article>);

}

function FeaturesSection() {
  const features = [
  { kind: 'lightning', title: 'Lightning-fast automation', body: 'Tuned for AU drops. Sub-second cart and checkout flows on every supported retailer.' },
  { kind: 'monitor', title: '24/7 monitoring', body: 'Always-on stock watchers across all six retailers. Catch restocks the moment they land.' },
  { kind: 'shield', title: 'Anti-bot bypass', body: 'Quietly handles queue systems, hidden form fields, and the rest of the friction layer.' },
  { kind: 'profile', title: 'Profile management', body: 'Save unlimited shipping and payment profiles. One-click load into any task.' },
  { kind: 'analytics', title: 'Real-time analytics', body: 'Per-task latency, success rates, and daily P&L. Optimise what actually moves the needle.' },
  { kind: 'updates', title: 'Frequent updates', body: 'Site changes shipped same-day. Ongoing tuning included with every active license.' }];

  return (
    <section style={{
      background: 'var(--iki-bg)', color: 'var(--iki-fg)',
      padding: '140px 56px', fontFamily: ikiFont
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72, gap: 40, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 720 }}>
          <SectionLabel index="04" label="Features" />
          <h2 style={{
            margin: '24px 0 0',
            fontSize: 'clamp(48px, 5.5vw, 84px)',
            fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.035em', textWrap: 'balance'
          }}>
            Built for people who{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 400 }}>want to win</span>{' '}
            drops.
          </h2>
        </div>
        <p style={{
          maxWidth: 360, margin: 0, fontSize: 15, lineHeight: 1.55, opacity: 0.7
        }}>
          Not a generic checkout layer. Every feature exists because someone in our Discord asked for it.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16
      }}>
        {features.map((f, i) =>
        <FeatureCard key={i} idx={i + 1} {...f} />
        )}
      </div>
    </section>);

}

// ============================================================
// 6. SUPPORTED RETAILERS
// ============================================================
function RetailersSection() {
  const retailers = [
  { name: 'Kmart' },
  { name: 'Big W' },
  { name: 'Target' },
  { name: 'EB Games' },
  { name: 'Costco' },
  { name: 'Toymate' }];

  return (
    <section style={{
      background: 'var(--iki-bg)', color: 'var(--iki-fg)',
      padding: '140px 56px', fontFamily: ikiFont,
      borderTop: ikiHair
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72, gap: 40, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 720 }}>
          <SectionLabel index="05" label="Supported retailers" />
          <h2 style={{
            margin: '24px 0 0',
            fontSize: 'clamp(48px, 5.5vw, 84px)',
            fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.035em', textWrap: 'balance'
          }}>
            Built specifically{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 400 }}>for Australia.</span>
          </h2>
        </div>
        <p style={{ maxWidth: 360, margin: 0, fontSize: 15, lineHeight: 1.55, opacity: 0.7 }}>
          AU-only by design. We tune deeply for six retailers instead of skimming fifty — and that&rsquo;s why we win.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16
      }}>
        {retailers.map((r, i) =>
        <div key={i} style={{
          background: 'var(--iki-fg)', color: 'var(--iki-bg)',
          borderRadius: 12, padding: '40px 32px',
          minHeight: 180, display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
        }}>
            <div style={{
            fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em'
          }}>
              {r.name}
            </div>
            <div style={{
            display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-end',
            marginTop: 24, paddingTop: 16,
            borderTop: '1px solid color-mix(in oklab, var(--iki-bg) 14%, transparent)'
          }}>
              <span style={{
              fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
              fontWeight: 600, opacity: 0.7,
              display: 'inline-flex', alignItems: 'center', gap: 6
            }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--iki-bg)' }} />
                Live
              </span>
            </div>
          </div>
        )}
      </div>

      <div style={{
        marginTop: 32, padding: '24px 32px',
        border: ikiHairStrong, borderRadius: 12,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        opacity: 0.7, fontSize: 13
      }}>
        <span>More AU retailers shipping each quarter.</span>
        <span style={{ letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 11 }}>
          Next up · Myer · The Warehouse
        </span>
      </div>
    </section>);

}

// ============================================================
// 7. TESTIMONIALS — cream section
// ============================================================
function Avatar({ initials, hue }) {
  return (
    <div style={{
      width: 40, height: 40, borderRadius: 999,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 13, fontWeight: 700, letterSpacing: '0.02em',
      color: 'var(--iki-fg)',
      background: `oklch(0.55 0.13 ${hue})`,
      flexShrink: 0
    }}>
      {initials}
    </div>);

}

function TestimonialCard({ name, handle, hue, quote }) {
  return (
    <article style={{
      background: 'var(--iki-fg)', color: 'var(--iki-bg)',
      border: '1px solid color-mix(in oklab, var(--iki-bg) 22%, transparent)',
      borderRadius: 12, padding: '28px 28px 24px',
      display: 'flex', flexDirection: 'column', gap: 18,
      fontFamily: ikiFont
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <Avatar initials={name.split(' ').map((s) => s[0]).join('').slice(0, 2)} hue={hue} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <strong style={{ fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em' }}>{name}</strong>
            <span style={{
              fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
              padding: '3px 7px', borderRadius: 4,
              background: 'color-mix(in oklab, var(--iki-bg) 8%, transparent)',
              border: '1px solid color-mix(in oklab, var(--iki-bg) 14%, transparent)',
              fontWeight: 600
            }}>
              Member
            </span>
          </div>
          <span style={{ fontSize: 12, opacity: 0.55, fontFamily: 'ui-monospace, "SF Mono", monospace' }}>{handle}</span>
        </div>
      </div>
      <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, opacity: 0.85 }}>
        {quote}
      </p>
    </article>);

}

function TestimonialsSection() {
  const items = [
  { name: 'Liam K.', handle: 'liam.au', hue: 30, quote: 'Pulled three Phantasmal Flames boxes on launch morning. I was still pouring coffee when the receipts came in.' },
  { name: 'Mia T.', handle: 'miatcg', hue: 200, quote: 'The Discord and the bot together — that&rsquo;s the unfair advantage. Genuinely the best AU community right now.' },
  { name: 'Noah W.', handle: 'pulls.noah', hue: 320, quote: 'Tried two of the international bots before this. Neither came close on Big W or Toymate. IkiBot just gets it.' },
  { name: 'Aaliyah R.', handle: 'aaliyahdrops', hue: 90, quote: 'Setup took ten minutes. Profile management alone has saved me hours every drop weekend.' }];

  return (
    <section style={{
      background: 'var(--iki-fg)', color: 'var(--iki-bg)',
      padding: '140px 56px', fontFamily: ikiFont,
      borderTop: ikiHairDark, borderBottom: ikiHairDark
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72, gap: 40, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 760 }}>
          <SectionLabel index="06" label="Testimonials" />
          <h2 style={{
            margin: '24px 0 0',
            fontSize: 'clamp(48px, 5.5vw, 84px)',
            fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.035em', textWrap: 'balance'
          }}>
            Trusted by the AU{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 400 }}>reselling</span>{' '}
            community.
          </h2>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14,
          fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.65
        }}>
          <span style={{
            display: 'inline-flex', width: 8, height: 8, borderRadius: 999,
            background: 'var(--iki-bg)'
          }} />
          From the IkiBot Discord
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16
      }}>
        {items.map((it, i) => <TestimonialCard key={i} {...it} />)}
      </div>
    </section>);

}

// ============================================================
// 8. FAQ
// ============================================================
function FAQItem({ q, a, open, onToggle, idx }) {
  return (
    <div style={{
      borderBottom: ikiHair,
      padding: '28px 0'
    }}>
      <button
        onClick={onToggle}
        aria-expanded={open}
        style={{
          all: 'unset', cursor: 'pointer', width: '100%',
          display: 'grid', gridTemplateColumns: '60px 1fr 40px',
          alignItems: 'baseline', gap: 24,
          color: 'var(--iki-fg)', fontFamily: ikiFont
        }}>
        
        <span style={{ fontSize: 12, letterSpacing: '0.18em', opacity: 0.5 }}>0{idx}</span>
        <h3 style={{
          margin: 0, fontSize: 'clamp(22px, 2.4vw, 32px)',
          fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.2
        }}>
          {q}
        </h3>
        <span aria-hidden="true" style={{
          fontSize: 22, fontWeight: 400, justifySelf: 'end',
          transition: 'transform 240ms ease', transform: open ? 'rotate(45deg)' : 'rotate(0)',
          width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          border: ikiHair, borderRadius: 999
        }}>
          +
        </span>
      </button>
      <div
        style={{
          display: 'grid', gridTemplateColumns: '60px 1fr 40px',
          gap: 24, overflow: 'hidden',
          maxHeight: open ? 240 : 0, opacity: open ? 1 : 0,
          transition: 'max-height 320ms cubic-bezier(.2,.7,.3,1), opacity 240ms ease, margin-top 240ms ease',
          marginTop: open ? 18 : 0
        }}>
        
        <span />
        <p style={{
          margin: 0, fontSize: 16, lineHeight: 1.6,
          opacity: 0.75, color: 'var(--iki-fg)', fontFamily: ikiFont,
          maxWidth: 720
        }}>
          {a}
        </p>
      </div>
    </div>);

}

function FAQSection() {
  const faqs = [
  { q: 'What is IkiBot?', a: 'IkiBot is a desktop checkout engine for Australian retailers. It monitors stock, automates carting, and completes checkout faster than manual flows — built specifically for limited drops.' },
  { q: 'How do I get access?', a: 'Two ways. Join our Discord waiting room for early-access slots, or join the Whop waitlist to be notified when public licenses open.' },
  { q: 'What retailers does IkiBot support?', a: 'Six AU retailers today: Kmart, Big W, Target, EB Games, Costco, and Toymate. We add new retailers each quarter based on community demand.' },
  { q: 'How is IkiBot different from other AU bots?', a: 'We tune deeply for fewer sites instead of skimming many. The whole product is built for the AU drop calendar — not a port of a US bot with the wrong currency symbol.' },
  { q: 'Do you offer support?', a: 'Yes — direct support inside the Discord, plus written setup guides and weekly office hours. Most issues are answered within an hour.' },
  { q: 'Is my data secure?', a: 'Profiles and payment details stay on your machine, encrypted at rest. Nothing is uploaded to our servers. We hold no third-party trackers and run no analytics on your accounts.' }];

  const [openIdx, setOpenIdx] = React.useState(0);

  return (
    <section style={{
      background: 'var(--iki-bg)', color: 'var(--iki-fg)',
      padding: '140px 56px', fontFamily: ikiFont
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 720 }}>
          <SectionLabel index="07" label="Frequently asked" />
          <h2 style={{
            margin: '24px 0 0',
            fontSize: 'clamp(48px, 5.5vw, 84px)',
            fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.035em', textWrap: 'balance'
          }}>
            Questions, answered{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 400 }}>plainly.</span>
          </h2>
        </div>
        <a style={{
          color: 'var(--iki-fg)', textDecoration: 'none',
          fontSize: 13, letterSpacing: '0.04em', opacity: 0.85,
          borderBottom: ikiHairStrong, paddingBottom: 4, cursor: 'pointer'
        }}>
          Ask in our Discord ↗
        </a>
      </div>

      <div style={{ borderTop: ikiHair }}>
        {faqs.map((f, i) =>
        <FAQItem
          key={i} idx={i + 1} q={f.q} a={f.a}
          open={openIdx === i}
          onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />

        )}
      </div>
    </section>);

}

// ============================================================
// 9. FINAL CTA STRIP
// ============================================================
function FinalCTA() {
  return (
    <section style={{
      background: 'var(--iki-fg)', color: 'var(--iki-bg)',
      padding: '120px 56px', fontFamily: ikiFont,
      borderTop: ikiHairDark, borderBottom: ikiHairDark
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto',
        alignItems: 'center', gap: 56
      }}>
        <h2 style={{
          margin: 0,
          fontSize: 'clamp(40px, 5vw, 80px)',
          fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.035em',
          textWrap: 'balance', maxWidth: '18ch'
        }}>
          The next drop&rsquo;s already loading.{' '}
          <span style={{ fontStyle: 'italic', fontWeight: 400 }}>Be ready.</span>
        </h2>
        <a style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          background: 'var(--iki-bg)', color: 'var(--iki-fg)',
          padding: '20px 32px', borderRadius: 8,
          fontSize: 16, fontWeight: 600, letterSpacing: '0.01em',
          textDecoration: 'none', cursor: 'pointer', whiteSpace: 'nowrap'
        }}>
          Join Whop Waitlist
          <span aria-hidden="true" style={{ fontSize: 18 }}>↗</span>
        </a>
      </div>
    </section>);

}

// ============================================================
// 10. FOOTER
// ============================================================
function Footer() {
  const cols = [
  { title: 'Navigation', items: ['Features', 'FAQ'] },
  { title: 'Community', items: ['Discord Waiting Room', 'Whop Waitlist'] },
  { title: 'Legal', items: ['Terms & Conditions', 'Refund Policy', 'EULA'] }];

  return (
    <footer style={{
      background: 'var(--iki-bg)', color: 'var(--iki-fg)',
      padding: '96px 56px 40px', fontFamily: ikiFont
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 56,
        paddingBottom: 64, borderBottom: ikiHair
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Wordmark size={28} />
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, opacity: 0.7, maxWidth: 320 }}>
            A desktop checkout engine for Australia&rsquo;s drop community. Quietly built in Melbourne.
          </p>
          <div style={{
            marginTop: 8, display: 'flex', gap: 10
          }}>
            <a style={{
              padding: '12px 18px', borderRadius: 999,
              background: 'var(--iki-fg)', color: 'var(--iki-bg)',
              fontSize: 13, fontWeight: 600, textDecoration: 'none', cursor: 'pointer'
            }}>Join Discord</a>
            <a style={{
              padding: '12px 18px', borderRadius: 999,
              border: ikiHairStrong, color: 'var(--iki-fg)',
              fontSize: 13, fontWeight: 600, textDecoration: 'none', cursor: 'pointer'
            }}>Whop Waitlist</a>
          </div>
        </div>

        {cols.map((c, i) =>
        <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            opacity: 0.5
          }}>{c.title}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map((it, j) =>
            <li key={j}>
                  <a style={{
                color: 'var(--iki-fg)', textDecoration: 'none',
                fontSize: 15, opacity: 0.85, cursor: 'pointer'
              }}>
                    {it}
                  </a>
                </li>
            )}
            </ul>
          </div>
        )}
      </div>

      <div style={{
        paddingTop: 40,
        display: 'flex', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
        fontSize: 12, opacity: 0.5, lineHeight: 1.55
      }}>
        <p style={{ margin: 0, maxWidth: 720 }}>
          IkiBot is independently developed and is not affiliated with, endorsed by, or sponsored by Kmart, Big W, Target, EB Games, Costco, or Toymate. Use of IkiBot is at the user&rsquo;s own risk and remains subject to each retailer&rsquo;s terms of service.
        </p>
        <span style={{
          fontFamily: ikiFont, fontWeight: 700, fontSize: 12, letterSpacing: '0.06em',
          opacity: 0.7
        }}>
          © 2026 Ikigai
        </span>
      </div>
    </footer>);

}

// ============================================================
// PRODUCT SHOWCASE — task manager UI mock
// ============================================================
function ShowcaseChip({ children, dot, fg, bg, border }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 6,
      fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
      fontFamily: 'ui-monospace, "SF Mono", monospace',
      background: bg || 'transparent',
      color: fg || 'inherit',
      border: border || '1px solid color-mix(in oklab, currentColor 18%, transparent)',
      whiteSpace: 'nowrap'
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: dot }} />}
      {children}
    </span>);

}

function StatusPill({ kind }) {
  const map = {
    Monitoring: { fg: 'oklch(0.78 0.14 230)', bg: 'color-mix(in oklab, oklch(0.78 0.14 230) 18%, transparent)' },
    Carting: { fg: 'oklch(0.82 0.14 75)', bg: 'color-mix(in oklab, oklch(0.82 0.14 75) 18%, transparent)' },
    Complete: { fg: 'oklch(0.82 0.16 145)', bg: 'color-mix(in oklab, oklch(0.82 0.16 145) 18%, transparent)' },
    Waiting: { fg: 'oklch(0.78 0.16 320)', bg: 'color-mix(in oklab, oklch(0.78 0.16 320) 18%, transparent)' },
    Idle: { fg: 'oklch(0.7 0 0)', bg: 'color-mix(in oklab, oklch(0.7 0 0) 16%, transparent)' }
  };
  const s = map[kind] || map.Idle;
  return (
    <span style={{
      display: 'inline-block',
      padding: '3px 10px', borderRadius: 4,
      fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
      color: s.fg, background: s.bg
    }}>{kind}</span>);

}

function BotMock() {
  const tasks = [
  { id: 'T-001', sku: 'AU-1234567', profile: 'Profile A', proxy: 'IKI PROXY', status: 'Monitoring', elapsed: '2:14', active: true },
  { id: 'T-002', sku: 'AU-1234567', profile: 'Profile B', proxy: 'IKI PROXY', status: 'Carting', elapsed: '1:52' },
  { id: 'T-003', sku: 'AU-1234567', profile: 'Profile C', proxy: 'RESIDENTIAL', status: 'Complete', elapsed: '0:44' },
  { id: 'T-004', sku: 'AU-1234567', profile: 'Profile A', proxy: 'IKI PROXY', status: 'Monitoring', elapsed: '2:14' },
  { id: 'T-005', sku: 'AU-1234567', profile: 'Profile B', proxy: 'IKI ISP', status: 'Waiting', elapsed: '3:01' },
  { id: 'T-006', sku: 'AU-1234567', profile: 'Profile C', proxy: 'IKI ISP', status: 'Idle', elapsed: '-:--' }];

  const groups = [
  { name: 'BigW', sku: 'AU-9876543', counts: '12 ●8 ⌫2 ✓2 ✗0', selected: true },
  { name: 'Target', sku: 'AU-9876543', counts: '5 ●5 ⌫1 ✓0 ✗0' },
  { name: 'Kmart', sub: 'double-click to rename', counts: '3 ●0 ✓1 ✗1' }];


  const bg = '#0A0A0B';
  const panelBg = '#101012';
  const fg = '#F2C9A4';
  const dim = 'color-mix(in oklab, #F2C9A4 60%, transparent)';
  const hair = '1px solid color-mix(in oklab, #F2C9A4 10%, transparent)';
  const hairStrong = '1px solid color-mix(in oklab, #F2C9A4 22%, transparent)';
  const apricot = '#F2C9A4';

  return (
    <div style={{
      width: '100%', maxWidth: 1180, margin: '0 auto',
      borderRadius: 14, overflow: 'hidden',
      background: bg, color: fg,
      fontFamily: ikiFont,
      boxShadow: '0 60px 140px -50px rgba(0,0,0,0.6), 0 20px 50px -25px rgba(0,0,0,0.4)',
      border: hair
    }}>
      {/* macOS chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16,
        padding: '12px 16px', borderBottom: hair,
        background: '#070708'
      }}>
        <div style={{ display: 'flex', gap: 7 }}>
          <span style={{ width: 12, height: 12, borderRadius: 999, background: '#3a3a3c' }} />
          <span style={{ width: 12, height: 12, borderRadius: 999, background: '#3a3a3c' }} />
          <span style={{ width: 12, height: 12, borderRadius: 999, background: '#3a3a3c' }} />
        </div>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
          color: apricot, marginLeft: 8
        }}>IKIBOT</div>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', gap: 8 }}>
          <ShowcaseChip fg={apricot} bg="color-mix(in oklab, #F2C9A4 14%, transparent)" border="none">20 tasks</ShowcaseChip>
          <ShowcaseChip fg={dim}>3 groups</ShowcaseChip>
          <ShowcaseChip fg={dim} dot="oklch(0.82 0.16 145)">16 running</ShowcaseChip>
        </div>
        <div style={{ flex: 1 }} />
      </div>

      {/* body */}
      <div style={{ display: 'grid', gridTemplateColumns: '52px 1fr', minHeight: 540 }}>
        {/* rail */}
        <div style={{
          borderRight: hair, padding: '14px 0',
          display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center',
          background: '#08080A'
        }}>
          {[
          <svg key="a" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={apricot} strokeWidth="1.4"><rect x="2" y="2" width="5" height="5" /><rect x="9" y="2" width="5" height="5" /><rect x="2" y="9" width="5" height="5" /><rect x="9" y="9" width="5" height="5" /></svg>,
          <svg key="b" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={dim} strokeWidth="1.4"><circle cx="8" cy="6" r="2.6" /><path d="M3 14 C3 10.5 5.2 9 8 9 C10.8 9 13 10.5 13 14" /></svg>,
          <svg key="c" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={dim} strokeWidth="1.4"><circle cx="8" cy="8" r="5.5" /></svg>].
          map((el, i) =>
          <div key={i} style={{
            width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderRadius: 6,
            background: i === 0 ? 'color-mix(in oklab, #F2C9A4 10%, transparent)' : 'transparent',
            border: i === 0 ? hairStrong : 'none'
          }}>{el}</div>
          )}
          <div style={{ flex: 1 }} />
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={dim} strokeWidth="1.4"><circle cx="8" cy="8" r="2" /><path d="M8 1.5 V3 M8 13 V14.5 M14.5 8 H13 M3 8 H1.5" /></svg>
        </div>

        {/* main */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {/* toolbar */}
          <div style={{
            padding: '14px 20px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            borderBottom: hair
          }}>
            <span style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.7, fontWeight: 600 }}>
              Tasks
            </span>
            <div style={{ display: 'flex', gap: 8 }}>
              {[
              { label: '▶ Start All', solid: true },
              { label: '■ Stop All' },
              { label: '+ New Task' },
              { label: '↑ Import CSV' }].
              map((b, i) =>
              <span key={i} style={{
                padding: '7px 14px', borderRadius: 6,
                fontSize: 12, fontWeight: 600,
                background: b.solid ? apricot : 'transparent',
                color: b.solid ? '#0A0A0B' : apricot,
                border: b.solid ? 'none' : hairStrong
              }}>{b.label}</span>
              )}
            </div>
          </div>

          {/* split */}
          <div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', flex: 1 }}>
            {/* groups */}
            <div style={{ borderRight: hair, padding: 14, display: 'flex', flexDirection: 'column', gap: 10, background: '#0C0C0E' }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '4px 6px'
              }}>
                <span style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.55, fontWeight: 600 }}>
                  Groups
                </span>
                <span style={{ opacity: 0.5, fontSize: 12 }}>◀</span>
              </div>
              <div style={{
                padding: '10px 12px', borderRadius: 8, border: hair,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 13
              }}>
                <span>≡ All Groups</span><span style={{ opacity: 0.55, fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>20</span>
              </div>
              {groups.map((g, i) =>
              <div key={i} style={{
                padding: '12px 14px', borderRadius: 8,
                border: g.selected ? `1px solid ${apricot}` : hair,
                background: g.selected ? 'color-mix(in oklab, #F2C9A4 6%, transparent)' : 'transparent',
                display: 'flex', flexDirection: 'column', gap: 6
              }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{g.name}</span>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: 'oklch(0.82 0.16 145)' }} />
                  </div>
                  {g.sku && <span style={{ fontSize: 11, opacity: 0.5, fontFamily: 'ui-monospace, monospace' }}>{g.sku}</span>}
                  {g.sub && <span style={{ fontSize: 11, opacity: 0.45 }}>{g.sub}</span>}
                  <span style={{ fontSize: 11, opacity: 0.65, fontFamily: 'ui-monospace, monospace' }}>{g.counts}</span>
                </div>
              )}
              <div style={{
                padding: '10px 12px', borderRadius: 8, border: hair,
                fontSize: 12, opacity: 0.5
              }}>📁 Ungrouped <span style={{ float: 'right' }}>3</span></div>
              <div style={{ fontSize: 10, opacity: 0.4, textAlign: 'center', marginTop: 4 }}>
                right-click card for actions
              </div>
            </div>

            {/* table */}
            <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column' }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 14
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600 }}>PRISMATIC EVOLUTION

                  </span>
                  <ShowcaseChip fg={apricot} bg="color-mix(in oklab, #F2C9A4 12%, transparent)" border="none">12</ShowcaseChip>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <span style={{ padding: '6px 12px', borderRadius: 6, fontSize: 12, fontWeight: 600, background: apricot, color: '#0A0A0B' }}>▶ Start</span>
                  <span style={{ padding: '6px 12px', borderRadius: 6, fontSize: 12, fontWeight: 600, color: apricot, border: hairStrong }}>■ Stop</span>
                </div>
              </div>

              {/* header */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: '40px 90px 110px 90px 80px 110px 80px 32px',
                gap: 12, padding: '8px 0', borderBottom: hair,
                fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5, fontWeight: 600
              }}>
                <span>#</span><span>Task ID</span><span>SKU</span>
                <span>Profile</span><span>Proxy</span>
                <span>Status</span><span>Elapsed</span><span />
              </div>

              {tasks.map((t, i) =>
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '40px 90px 110px 90px 80px 110px 80px 32px',
                gap: 12, padding: '12px 0', borderBottom: hair,
                alignItems: 'center', fontSize: 13,
                background: t.active ? 'linear-gradient(90deg, color-mix(in oklab, #F2C9A4 6%, transparent), transparent 40%)' : 'transparent',
                borderLeft: t.active ? `2px solid ${apricot}` : '2px solid transparent',
                marginLeft: t.active ? -16 : 0,
                paddingLeft: t.active ? 16 : 0
              }}>
                  <span style={{ opacity: 0.55 }}>{i + 1}</span>
                  <span style={{ fontFamily: 'ui-monospace, monospace', fontWeight: 700, color: apricot }}>{t.id}</span>
                  <span style={{ fontFamily: 'ui-monospace, monospace', opacity: 0.85 }}>{t.sku}</span>
                  <span style={{ opacity: 0.85 }}>{t.profile}</span>
                  <span style={{ opacity: 0.85 }}>{t.proxy}</span>
                  <StatusPill kind={t.status} />
                  <span style={{ fontFamily: 'ui-monospace, monospace', opacity: 0.85 }}>{t.elapsed}</span>
                  <span style={{ opacity: 0.4 }}>▢</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function ProductShowcase() {
  return (
    <section style={{
      background: 'var(--iki-bg)', color: 'var(--iki-fg)',
      padding: '140px 56px 120px', fontFamily: ikiFont,
      borderTop: ikiHair, borderBottom: ikiHair
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 760 }}>
          <SectionLabel index="02" label="The product" />
          <h2 style={{
            margin: '24px 0 0',
            fontSize: 'clamp(48px, 5.5vw, 84px)',
            fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.035em', textWrap: 'balance'
          }}>
            One window.{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 400 }}>All your tasks.</span>
          </h2>
        </div>
        <p style={{ maxWidth: 360, margin: 0, fontSize: 15, lineHeight: 1.55, opacity: 0.7 }}>
          Group by drop, watch every task in one table, and start or stop the whole room with one button.
        </p>
      </div>

      <BotMock />
    </section>);

}

Object.assign(window, {
  PressStrip, StatsSection, FeaturesSection, RetailersSection,
  TestimonialsSection, FAQSection, FinalCTA, Footer,
  ProductShowcase
});