/* SKOPIA Landing — Marketing sections */

/* =========================================================
   NAV
   ========================================================= */
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  { label: 'Products', href: '#workflow' },
  { label: 'Pricing', href: '#pricing' },
  { label: 'AI', href: '#ai' },
  { label: 'Demo', href: '#tour' }];


  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      transition: 'all .25s ease',
      backdropFilter: 'saturate(160%) blur(14px)',
      WebkitBackdropFilter: 'saturate(160%) blur(14px)',
      background: scrolled ? 'rgba(247,248,252,0.82)' : 'rgba(247,248,252,0.0)',
      borderBottom: scrolled ? '1px solid rgba(226,230,240,0.7)' : '1px solid transparent'
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68 }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Logo size={28} />
        </a>
        <nav className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {links.map((l) =>
          <a key={l.label} href={l.href} style={{
            padding: '8px 14px',
            fontFamily: 'var(--font-head)', fontSize: 13, fontWeight: 600,
            color: '#1A1A2E', borderRadius: 999, transition: 'background .15s'
          }} onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(74,111,232,0.08)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              {l.label}
            </a>
          )}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="https://app.skopia.com.au/" style={{ fontFamily: 'var(--font-head)', fontSize: 13, fontWeight: 600, color: '#1A1A2E' }}>Sign in</a>
          <Btn variant="primary" href="#pricing">Try Lens free <Icon name="arrow" size={14} stroke={2.2} /></Btn>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </header>);

};

/* =========================================================
   HERO
   ========================================================= */
const Hero = () =>
<section id="top" style={{ position: 'relative', paddingTop: 140, paddingBottom: 80, overflow: 'hidden' }}>
    {/* Ambient gradient mesh */}
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      <div className="orb-bg" style={{
      width: 560, height: 560, top: -140, left: -120,
      background: 'radial-gradient(closest-side, rgba(30,200,212,0.45), transparent 70%)',
      animation: 'drift 18s ease-in-out infinite'
    }} />
      <div className="orb-bg" style={{
      width: 600, height: 600, top: 80, right: -160,
      background: 'radial-gradient(closest-side, rgba(74,111,232,0.40), transparent 70%)',
      animation: 'drift 22s ease-in-out infinite reverse'
    }} />
      <div className="orb-bg" style={{
      width: 420, height: 420, bottom: -180, left: '40%',
      background: 'radial-gradient(closest-side, rgba(106,63,204,0.30), transparent 70%)'
    }} />
      {/* Grid pattern */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.4 }}>
        <defs>
          <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M 48 0 L 0 0 0 48" fill="none" stroke="#D8DEF0" strokeWidth="0.5" />
          </pattern>
          <radialGradient id="grid-fade" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stopColor="white" stopOpacity="0.6" />
            <stop offset="100%" stopColor="white" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
        <rect width="100%" height="100%" fill="url(#grid-fade)" />
      </svg>
    </div>

    <div className="container" style={{ position: 'relative', zIndex: 2 }}>
      <Reveal delay={80}>
        <h1 className="h-display" style={{ textAlign: 'center', maxWidth: 1040, margin: '0 auto 24px', textWrap: 'balance' }}>
          <span className="grad-text">The Intelligence Behind Every Project Decision.</span>
        </h1>
      </Reveal>
      <Reveal delay={140}>
        <p className="lede" style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 36px', fontSize: 19 }}>
          Analyse schedules, build programs, track progress, and deliver smarter projects — from one streamlined platform built for real contractors.
        </p>
      </Reveal>
      <Reveal delay={200}>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 18 }}>
          <Btn variant="primary" href="#pricing">Try SKOPIA Lens free <Icon name="arrow" size={14} stroke={2.2} /></Btn>
          <Btn variant="secondary" href="#workflow"><Icon name="play" size={11} stroke={2} />View product workflow</Btn>
        </div>
      </Reveal>
      <Reveal delay={260}>
        <div style={{ display: 'flex', gap: 22, justifyContent: 'center', flexWrap: 'wrap', fontFamily: 'var(--font-body)', fontSize: 12, color: '#6B7280', marginBottom: 56 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={13} color="#16A34A" stroke={2.4} />No install</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={13} color="#16A34A" stroke={2.4} />Browser-first</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={13} color="#16A34A" stroke={2.4} />Free tier, no card</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={13} color="#16A34A" stroke={2.4} />XER · MPP · XML supported</span>
        </div>
      </Reveal>

      <Reveal delay={320}>
        <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', padding: '0 20px' }}>
          <HeroDashboard />
        </div>
      </Reveal>
    </div>
  </section>;


/* =========================================================
   LOGO STRIP
   ========================================================= */
const LogoStrip = () => {
  const logos = [
  'CIVIC GROUP', 'FORMSTONE', 'KEYSTONE BUILT', 'NORTHARC', 'OAKRIDGE & CO.', 'BUILDLINK', 'PALISADE'];

  return (
    <section style={{ padding: '40px 0 20px', borderTop: '1px solid #E8ECF6', borderBottom: '1px solid #E8ECF6' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <span className="eyebrow">Trusted by contractors building the world</span>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '24px 56px', alignItems: 'center', opacity: 0.7 }}>
          {logos.map((l) =>
          <span key={l} style={{
            fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 14,
            letterSpacing: 2, color: '#9AA0B0'
          }}>{l}</span>
          )}
        </div>
      </div>
    </section>);

};

/* =========================================================
   PROBLEM
   ========================================================= */
const Problem = () => {
  const old = [
  { t: 'Six tools, four logins', d: 'Schedules in P6, costs in spreadsheets, PPM for progress, reports in Word. Nothing reconciles.' },
  { t: 'Five-figure licences', d: 'Per-seat enterprise pricing that punishes adoption. Most of the team never opens it.' },
  { t: 'Two-day install ceremony', d: 'IT tickets, runtime libraries, version mismatches. Onboarding measured in weeks.' },
  { t: 'Schedule analysis by spreadsheet', d: 'Manual XER parsing, copy-paste health checks, screenshots stitched into PDFs.' },
  { t: 'Field ↔ office disconnect', d: 'Updates that arrive Friday for a Monday meeting. By then it’s already wrong.' },
  { t: 'Reports the client won’t read', d: '40-page exports nobody opens. EVM that nobody trusts. Variations argued line-by-line.' }];

  return (
    <section className="section-pad" id="problem">
      <div className="container">
        <Reveal>
          <SectionHeader
            eyebrow="The problem"
            title={<>Most project controls software is built<br />for administrators. <span style={{ color: '#9AA0B0' }}>Not contractors.</span></>}
            lede="Project teams don't need more dashboards. They need fewer screens between a schedule update on site and a defensible report on the desk." />
          
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16, marginTop: 56 }}>
          {old.map((card, i) =>
          <Reveal key={card.t} delay={i * 60}>
              <div style={{
              background: '#fff', border: '1px solid #E2E6F0', borderRadius: 4,
              padding: '28px 24px', height: '100%',
              transition: 'transform .25s ease, box-shadow .25s ease, border-color .25s ease',
              cursor: 'default'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = '0 16px 40px -12px rgba(42,77,204,0.14)';e.currentTarget.style.borderColor = '#C8D0E4';}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';e.currentTarget.style.borderColor = '#E2E6F0';}}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
                  <span style={{ width: 28, height: 28, borderRadius: 4, background: '#FFF5F5', border: '1px solid #FECACA', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="x" size={14} color="#DC2626" stroke={2.4} />
                  </span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#9AA0B0', letterSpacing: 1 }}>0{i + 1}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 17, marginBottom: 8, color: '#1A1A2E' }}>{card.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.6, color: '#6B7280' }}>{card.d}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

/* =========================================================
   WORKFLOW ARC — Lens → Lens Pro → Build → Track
   ========================================================= */
const Workflow = () => {
  const stages = [
  {
    key: 'lens',
    tier: 'Tier 01 · Free',
    name: 'SKOPIA Lens',
    tagline: 'Schedule health in 60 seconds.',
    desc: 'Drop in an XER, MPP or XML. Get a graded DCMA health report in under 60 seconds — logic, float, critical path, constraints.',
    grad: 'linear-gradient(135deg,#1EC8D4,#3CC8C8)',
    bullets: ['Browser-first', 'No registration', 'Watermarked PDF', 'Shareable link'],
    icon: 'lens'
  },
  {
    key: 'lens-pro',
    tier: 'Tier 02 · $19.99/mo',
    name: 'SKOPIA Lens Pro',
    tagline: 'Convert, customise, export.',
    desc: 'Custom thresholds, full unwatermarked export, and the schedule conversion engine. XER ↔ MSP XML, MSP XML ↔ XER, plus Helios AI insights baked in.',
    grad: 'linear-gradient(135deg,#3CC8C8,#4A6FE8)',
    bullets: ['Custom thresholds', 'Full export', 'Format conversion', 'Helios AI'],
    icon: 'layers'
  },
  {
    key: 'build',
    tier: 'Tier 03',
    name: 'SKOPIA Build',
    tagline: 'Program · cost · quote.',
    desc: 'Full schedule editing on a cost-loaded WBS. Mobile quoting workflow with Xero and MYOB export, ready for EVM.',
    grad: 'linear-gradient(135deg,#4A6FE8,#2A4DCC)',
    bullets: ['Cost-loaded WBS', 'XLSX templates', 'Mobile quoting', 'Xero · MYOB'],
    icon: 'hammer'
  },
  {
    key: 'track',
    tier: 'Tier 04',
    name: 'SKOPIA Track',
    tagline: 'Progress, EVM, AI reporting.',
    desc: 'Progress tracking, full EVM module, S-curves and milestone tracking. Helios writes the client-ready commentary and variation narratives.',
    grad: 'linear-gradient(135deg,#2A4DCC,#6A3FCC)',
    bullets: ['Full EVM module', 'S-curves', 'AI reporting', 'Whiteboard notes'],
    icon: 'track'
  }];


  return (
    <section className="section-pad" id="workflow" style={{ background: '#fff', borderTop: '1px solid #E8ECF6', borderBottom: '1px solid #E8ECF6' }}>
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="The workflow arc"
            title={<>One platform. Four products.<br /><span className="grad-text">From first review to final report.</span></>}
            lede="Start with a free schedule health check. Scale into a full earned-value tracking system as your project demands more." />
          
        </Reveal>

        <div style={{ position: 'relative', marginTop: 64 }}>
          {/* Connector line behind cards */}
          <svg className="workflow-connector" width="100%" height="40" style={{
            position: 'absolute', top: 24, left: 0, zIndex: 0
          }}>
            <defs>
              <linearGradient id="wf-line" x1="0" x2="1" y1="0" y2="0">
                <stop offset="0%" stopColor="#1EC8D4" />
                <stop offset="50%" stopColor="#4A6FE8" />
                <stop offset="100%" stopColor="#6A3FCC" />
              </linearGradient>
            </defs>
            <line x1="8%" y1="20" x2="92%" y2="20" stroke="url(#wf-line)" strokeWidth="2" strokeDasharray="6 6" opacity="0.4" />
          </svg>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20, position: 'relative', zIndex: 1 }}>
            {stages.map((s, i) =>
            <Reveal key={s.key} delay={i * 80}>
                <div style={{
                background: '#fff',
                border: '1px solid #E2E6F0',
                borderRadius: 4,
                overflow: 'hidden',
                height: '100%',
                display: 'flex', flexDirection: 'column',
                boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
                transition: 'transform .25s ease, box-shadow .25s ease'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 24px 60px -16px rgba(42,77,204,0.22)';}}
              onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)';}}>
                  <div style={{ height: 6, background: s.grad }} />
                  <div style={{ padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{
                      width: 40, height: 40, borderRadius: 4,
                      background: s.grad,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 6px 18px rgba(42,77,204,0.22)'
                    }}>
                        <Icon name={s.icon} size={18} color="#fff" stroke={2} />
                      </span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#9AA0B0' }}>{`0${i + 1}`}</span>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-head)', fontSize: 9, fontWeight: 700, letterSpacing: 2, color: '#9AA0B0', marginBottom: 4 }}>{s.tier.toUpperCase()}</div>
                      <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 22, color: '#1A1A2E', marginBottom: 6, letterSpacing: -0.4 }}>{s.name}</h3>
                      <p style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 13, color: '#1A1A2E', marginBottom: 10 }}>{s.tagline}</p>
                      <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#6B7280' }}>{s.desc}</p>
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 'auto', paddingTop: 12, borderTop: '1px dashed #EFF1F7' }}>
                      {s.bullets.map((b) =>
                    <span key={b} style={{
                      padding: '4px 10px', borderRadius: 999,
                      fontFamily: 'var(--font-mono)', fontSize: 10, color: '#4A6FE8',
                      background: '#F4F6FB', border: '1px solid #E2E6F0'
                    }}>{b}</span>
                    )}
                    </div>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>);

};

/* =========================================================
   PRICING
   ========================================================= */
const Pricing = () => {
  const [annual, setAnnual] = useState(false);
  const tiers = [
  {
    name: 'Lens', tagline: 'Schedule health in 60 seconds.',
    m: 0, a: 0, free: true, grad: 'linear-gradient(135deg,#1EC8D4,#3CC8C8)',
    cta: 'Start free', ribbon: null,
    features: ['6 schedule uploads / month', 'XER + MPP + XML upload', 'Baseline comparison', 'CPM forward / backward pass', 'Instant health report', 'Watermarked PDF export', 'Try free — no card required', 'Shareable read-only links']
  },
  {
    name: 'Lens Pro', tagline: 'Convert, customise, export.',
    m: 19.99, a: 15.99, grad: 'linear-gradient(135deg,#3CC8C8,#4A6FE8)',
    cta: 'Choose Lens Pro', ribbon: 'Most popular',
    features: ['Everything in Lens', 'Custom health thresholds', 'Full PDF export · unwatermarked', 'Schedule conversion engine', 'XER ↔ MSP XML', 'MSP XML ↔ XER', 'Helios AI Insights']
  },
  {
    name: 'Build', tagline: 'Program · cost · quote.',
    m: 39.99, a: 31.99, grad: 'linear-gradient(135deg,#4A6FE8,#2A4DCC)',
    cta: 'Choose Build', ribbon: null, comingSoon: true,
    features: ['Everything in Lens Pro', 'Schedule editing', 'XLSX Template Wizard', 'Cost-loaded WBS', 'EVM readiness', 'Mobile quoting workflow', 'Xero export · MYOB export']
  },
  {
    name: 'Track', tagline: 'Progress, EVM, AI reporting.',
    m: 69.99, a: 55.99, grad: 'linear-gradient(135deg,#2A4DCC,#6A3FCC)',
    cta: 'Choose Track', ribbon: null, comingSoon: true,
    features: ['Everything in Build', 'Progress tracking', 'Whiteboard notes', 'Full EVM module', 'S-curves · milestone tracking', 'AI reporting', 'AI variation commentary']
  }];


  return (
    <section className="section-pad" id="pricing" style={{ background: 'var(--color-bg-light)' }}>
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="Pricing"
            title={<>Start with Lens. <span className="grad-text">Scale to Track.</span></>}
            lede="Honest per-seat pricing in AUD. Cancel any time. Annual saves 20% across every paid tier." />
          
        </Reveal>

        {/* Toggle */}
        <Reveal delay={80}>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36, marginBottom: 40 }}>
            <div style={{
              display: 'inline-flex', padding: 4,
              background: '#fff', border: '1px solid #E2E6F0', borderRadius: 999,
              boxShadow: '0 2px 8px rgba(0,0,0,0.04)', position: 'relative'
            }}>
              {['Monthly', 'Annual −20%'].map((label, i) => {
                const active = i === 1 === annual;
                return (
                  <button key={label} onClick={() => setAnnual(i === 1)} style={{
                    border: 'none', cursor: 'pointer',
                    padding: '8px 18px', borderRadius: 999,
                    fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 12, letterSpacing: 0.4,
                    background: active ? 'var(--color-grad)' : 'transparent',
                    color: active ? '#fff' : '#6B7280',
                    transition: 'all .2s ease'
                  }}>{label}</button>);

              })}
            </div>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16, alignItems: 'stretch' }}>
          {tiers.map((t, i) => {
            const isPop = t.ribbon === 'Most popular';
            const price = annual ? t.a : t.m;
            return (
              <Reveal key={t.name} delay={i * 60}>
                <div style={{
                  position: 'relative', height: '100%',
                  background: isPop ? '#1E1E1E' : '#fff',
                  color: isPop ? '#fff' : '#1A1A2E',
                  border: isPop ? '1px solid #1E1E1E' : '1px solid #E2E6F0',
                  borderRadius: 4,
                  display: 'flex', flexDirection: 'column',
                  overflow: 'hidden',
                  boxShadow: isPop ? '0 30px 80px -20px rgba(42,77,204,0.3)' : '0 2px 12px rgba(0,0,0,0.06)',
                  transform: isPop ? 'translateY(-8px)' : 'none',
                  opacity: 1,
                  transition: 'transform .25s ease'
                }}>
                  <div style={{ height: 6, background: t.grad }} />
                  {(t.ribbon || t.comingSoon) &&
                  <div style={{
                    position: 'absolute', top: 18, right: 18, zIndex: 6,
                    padding: '4px 10px', borderRadius: 999,
                    fontFamily: 'var(--font-head)', fontSize: 9, fontWeight: 700, letterSpacing: 1.5,
                    background: t.comingSoon ?
                    'rgba(30,200,212,0.15)' :
                    isPop ? 'var(--color-grad)' : '#EFF1FB',
                    color: t.comingSoon ? '#1EC8D4' : isPop ? '#fff' : '#2A4DCC',
                    border: t.comingSoon ? '1px solid rgba(30,200,212,0.3)' : 'none'
                  }}>{(t.comingSoon ? 'Coming soon' : t.ribbon).toUpperCase()}</div>
                  }
                  <div style={{ padding: '28px 24px 0' }}>
                    <div style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 22, letterSpacing: -0.4 }}>SKOPIA {t.name}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: isPop ? 'rgba(255,255,255,0.6)' : '#6B7280', marginTop: 4 }}>{t.tagline}</div>

                    {!t.comingSoon &&
                    <>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 22, marginBottom: 4 }}>
                      <span style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 44, letterSpacing: -1.5 }}>
                        {t.free ? 'Free' : `$${price.toFixed(2)}`}
                      </span>
                      {!t.free &&
                        <span style={{ fontFamily: 'var(--font-head)', fontSize: 12, fontWeight: 700, color: isPop ? 'rgba(255,255,255,0.5)' : '#6B7280' }}>
                          AUD / seat / mo
                        </span>
                        }
                    </div>
                    {!t.free && annual &&
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1EC8D4' }}>billed ${(t.a * 12).toFixed(0)} yearly</div>
                      }
                    </>
                    }
                    {t.comingSoon &&
                    <div style={{
                      fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 32, letterSpacing: -1,
                      marginTop: 22, marginBottom: 4,
                      background: 'var(--color-grad)',
                      WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                      backgroundClip: 'text'
                    }}>Pricing TBA</div>
                    }
                  </div>

                  <div style={{ padding: '20px 24px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14, flex: 1 }}>
                      {t.features.map((f) =>
                      <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                          <span style={{
                          flexShrink: 0, marginTop: 2,
                          width: 16, height: 16, borderRadius: '50%',
                          background: t.grad,
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                        }}>
                            <Icon name="check" size={10} color="#fff" stroke={3} />
                          </span>
                          <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.45, color: isPop ? 'rgba(255,255,255,0.85)' : '#1A1A2E' }}>{f}</span>
                        </div>
                      )}
                    </div>
                    <div style={{ marginTop: 22 }}>
                      <Btn variant={t.comingSoon ? 'secondary' : isPop ? 'on-dark' : t.free ? 'primary' : 'secondary'} href={t.comingSoon ? '#waitlist' : t.name === 'Lens Pro' ? 'https://app.skopia.com.au/?plan=pro' : 'https://app.skopia.com.au/'} style={{ width: '100%', justifyContent: 'center', opacity: t.comingSoon ? 0.85 : 1 }}>
                        {t.comingSoon ? <>Join the waitlist</> : <>{t.cta} <Icon name="arrow" size={13} stroke={2.2} /></>}
                      </Btn>
                    </div>
                  </div>
                </div>
              </Reveal>);

          })}
        </div>

        <div style={{ marginTop: 28, textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: 13, color: '#6B7280' }}>
          Volume pricing for teams of 10+ &middot; <a href="#contact" style={{ color: '#2A4DCC', fontWeight: 600 }}>Contact Us</a>
        </div>
      </div>
    </section>);

};

/* =========================================================
   WHY SKOPIA — bento
   ========================================================= */
const WhyBento = () => {
  return (
    <section className="section-pad" id="why">
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="Why SKOPIA"
            title={<>Software that respects <span className="grad-text">your time on the job.</span></>}
            lede="Built browser-first by practitioners who spent two decades watching expensive tools sit unused. Every feature exists to remove a step, not add a screen." />
          
        </Reveal>

        <div className="bento" style={{
          marginTop: 56,
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gridAutoRows: 'minmax(180px, auto)',
          gap: 16
        }}>
          {/* Browser-first hero */}
          <BentoCard span="span 4" rows="span 2">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
              <Pill tone="default">BROWSER-FIRST</Pill>
              <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 30, letterSpacing: -0.6, lineHeight: 1.1 }}>
                Open the URL.<br /><span className="grad-text">Drop the schedule.</span> That's it.
              </h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#6B7280', lineHeight: 1.6, maxWidth: 460 }}>
                Zero install, zero IT ticket, zero version drift. SKOPIA runs in any modern browser and reconciles XER, MPP and XML natively — including baselines.
              </p>
              <div style={{ marginTop: 'auto' }}>
                <BrowserPreview />
              </div>
            </div>
          </BentoCard>

          {/* Speed */}
          <BentoCard span="span 2" rows="span 1">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
              <Pill tone="cyan">SPEED</Pill>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 48, fontWeight: 500, letterSpacing: -2, color: '#1A1A2E' }}>&lt; 60s</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#6B7280', lineHeight: 1.5 }}>From upload to graded health report.</p>
            </div>
          </BentoCard>

          {/* Built by practitioners */}
          <BentoCard span="span 2" rows="span 1" dark>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
              <Pill tone="dark">BUILT BY PRACTITIONERS</Pill>
              <div style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 36, letterSpacing: -1, color: '#fff' }}>20<span className="grad-text">+</span> yrs</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5 }}>Of scheduling and project controls in head office and on site.</p>
            </div>
          </BentoCard>

          {/* Conversion engine */}
          <BentoCard span="span 3" rows="span 2">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
              <Pill tone="default">CONVERSION ENGINE</Pill>
              <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 22, letterSpacing: -0.4 }}>One source. Every format.</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#6B7280', lineHeight: 1.55 }}>Convert between XER and MSP XML directly in the browser. No software needed. Your client reads MSP, your subcontractor runs P6 — SKOPIA bridges both.</p>
              <ConversionDiagram />
            </div>
          </BentoCard>

          {/* AI commentary */}
          <BentoCard span="span 3" rows="span 2" gradient>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
              <Pill tone="dark" style={{ background: 'rgba(255,255,255,0.18)', borderColor: 'rgba(255,255,255,0.28)', color: '#fff' }}>HELIOS AI</Pill>
              <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 22, letterSpacing: -0.4, color: '#fff' }}>Your schedule. Explained.</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.55 }}>Helios reads your health check results and writes the analysis — ranked risks, float erosion, forensic examination. Modelled on EPC/EPCM planning standards. You review, sign off, send.</p>
              <div style={{ marginTop: 'auto', padding: 14, borderRadius: 4, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.18)', backdropFilter: 'blur(10px)' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,0.6)', marginBottom: 6 }}>// Helios · forensic analysis</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: '#fff', lineHeight: 1.55 }}>
                  Near-critical exposure: 14 activities within 5d float. Top risk: <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, background: 'rgba(255,255,255,0.16)', borderRadius: 3, padding: '1px 5px' }}>RBT.PR.3.05.03</span> — zero float, 3 open successors. Recommend immediate logic review.
                </div>
              </div>
            </div>
          </BentoCard>

          {/* No licence needed */}
          <BentoCard span="span 2" rows="span 1">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
              <Pill tone="default">NO LICENCE NEEDED</Pill>
              <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16, letterSpacing: -0.2 }}>View any schedule. No software required.</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: '#6B7280', lineHeight: 1.5 }}>Open an XER or MPP file directly in your browser. No Primavera licence, no MS Project seat, no IT request. Anyone on the team can review the program — not just the one person with P6.</p>
            </div>
          </BentoCard>

          {/* Onboarding */}
          <BentoCard span="span 2" rows="span 1">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
              <Pill tone="default">ONBOARDING</Pill>
              <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16, letterSpacing: -0.2 }}>Five minutes from sign-up to first report.</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: '#6B7280', lineHeight: 1.5 }}>Sample projects pre-loaded. No training needed.</p>
            </div>
          </BentoCard>

          {/* Format bridge */}
          <BentoCard span="span 2" rows="span 1">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
              <Pill tone="default">FORMAT BRIDGE</Pill>
              <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16, letterSpacing: -0.2 }}>Your format. Their format. Sorted.</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: '#6B7280', lineHeight: 1.5 }}>Principal running MS Project? Subcontractor in XLSX? Client wants P6? SKOPIA converts bidirectionally so the schedule travels without friction — regardless of who's reading it or what software they're licensed for.</p>
            </div>
          </BentoCard>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .bento { grid-template-columns: repeat(2, 1fr) !important; }
            .bento > div { grid-column: span 2 !important; grid-row: auto !important; }
          }
        `}</style>
      </div>
    </section>);

};

const BentoCard = ({ children, span, rows, dark, gradient }) =>
<div style={{
  gridColumn: span, gridRow: rows,
  background: gradient ? 'linear-gradient(135deg,#1EC8D4 0%,#4A6FE8 50%,#2A4DCC 100%)' : dark ? '#1E1E1E' : '#fff',
  color: dark || gradient ? '#fff' : '#1A1A2E',
  border: dark ? '1px solid #1E1E1E' : gradient ? 'none' : '1px solid #E2E6F0',
  borderRadius: 4,
  padding: 24,
  boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
  position: 'relative', overflow: 'hidden',
  transition: 'transform .25s ease, box-shadow .25s ease'
}}
onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = '0 16px 40px -12px rgba(42,77,204,0.18)';}}
onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)';}}>
    {gradient &&
  <>
        <div className="orb-bg" style={{ width: 240, height: 240, top: -60, right: -60, background: 'radial-gradient(closest-side, rgba(255,255,255,0.4), transparent)', opacity: 0.5 }} />
        <div className="orb-bg" style={{ width: 200, height: 200, bottom: -80, left: -40, background: 'radial-gradient(closest-side, rgba(106,63,204,0.5), transparent)', opacity: 0.5 }} />
      </>
  }
    <div style={{ position: 'relative', zIndex: 1, height: '100%' }}>{children}</div>
  </div>;


const BrowserPreview = () =>
<div style={{ background: '#FAFBFE', border: '1px solid #E2E6F0', borderRadius: 4, padding: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#6B7280' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8, paddingBottom: 8, borderBottom: '1px dashed #E2E6F0' }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FE5F57' }}></span>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FEBB2D' }}></span>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#27C93F' }}></span>
      <span style={{ marginLeft: 8, color: '#9AA0B0' }}>skopia.com.au</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div>$ <span style={{ color: '#1A1A2E' }}>upload</span> harborfront-tower-baseline-04.xer</div>
      <div style={{ color: '#16A34A' }}>✓ parsed 2,148 activities · 4,892 logic ties</div>
      <div style={{ color: '#16A34A' }}>✓ critical path resolved · 187 activities</div>
      <div>health = <span style={{ color: '#2A4DCC' }}>compute()</span></div>
      <div style={{ color: '#1EC8D4' }}>→ overall: 90.0 · grade: A</div>
    </div>
  </div>;


const ConversionDiagram = () =>
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 8 }}>
    <svg width="100%" height="120" viewBox="0 0 320 120">
      <defs>
        <linearGradient id="conv-grad" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#1EC8D4" />
          <stop offset="100%" stopColor="#2A4DCC" />
        </linearGradient>
        <marker id="arrow-right" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#4A6FE8" />
        </marker>
        <marker id="arrow-left" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#1EC8D4" />
        </marker>
      </defs>

      {/* Left node — XER */}
      <rect x="20" y="48" width="56" height="26" rx="4" fill="#fff" stroke="#C8D0E4" strokeWidth="1.2" />
      <text x="48" y="65" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fontWeight="500" fill="#1A1A2E">XER</text>

      {/* Right node — MSP XML */}
      <rect x="226" y="48" width="74" height="26" rx="4" fill="#fff" stroke="#C8D0E4" strokeWidth="1.2" />
      <text x="263" y="65" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fontWeight="500" fill="#1A1A2E">MSP XML</text>

      {/* Top arrow — XER → MSP XML */}
      <line x1="76" y1="42" x2="226" y2="42" stroke="#4A6FE8" strokeWidth="1.6" strokeDasharray="3 3" markerEnd="url(#arrow-right)" />

      {/* Bottom arrow — MSP XML → XER */}
      <line x1="226" y1="80" x2="76" y2="80" stroke="#1EC8D4" strokeWidth="1.6" strokeDasharray="3 3" markerEnd="url(#arrow-left)" />

      {/* Center engine */}
      <rect x="130" y="46" width="60" height="30" rx="5" fill="url(#conv-grad)" />
      <text x="160" y="65" textAnchor="middle" fontFamily="var(--font-head)" fontWeight="700" fontSize="11" fill="#fff" letterSpacing="1">SKOPIA</text>

      {/* Subtle label */}
      <text x="160" y="103" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#9AA0B0" letterSpacing="0.5">XER &#8596; MSP XML &#183; in browser</text>
    </svg>
  </div>;


Object.assign(window, { Nav, Hero, LogoStrip, Problem, Workflow, Pricing, WhyBento });