/* HeroIllustration.jsx — 3D-style isometric stacked UI cards. 3 variations. */

const Icon = ({ name, size = 18, style }) =>
<span className="iconify" data-icon={name} data-width={size} data-height={size} style={style}></span>;


/* ── Reusable mini app card pieces ───────────────────────────────────── */

const MiniJobsCard = ({ style }) =>
<div className="iso-card" style={style}>
    <div className="mini-header">
      <div>Today's jobs</div>
      <div className="mini-tabs">
        <span className="mini-tab active">Today</span>
        <span className="mini-tab">Week</span>
      </div>
    </div>
    <div className="mini-row">
      <div className="avatar av-1">RV</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, color: 'var(--color-link)' }}>Riverside Plaza</div>
        <div style={{ color: 'var(--color-bodytext)', fontSize: 11 }}>09:00 · Office</div>
      </div>
      <span className="chip chip-success">Done</span>
    </div>
    <div className="mini-row">
      <div className="avatar av-2">MK</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, color: 'var(--color-link)' }}>Maple Kitchen</div>
        <div style={{ color: 'var(--color-bodytext)', fontSize: 11 }}>11:30 · Resi</div>
      </div>
      <span className="chip chip-primary">In progress</span>
    </div>
    <div className="mini-row">
      <div className="avatar av-3">CR</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, color: 'var(--color-link)' }}>Crescent Clinic</div>
        <div style={{ color: 'var(--color-bodytext)', fontSize: 11 }}>14:00 · Medical</div>
      </div>
      <span className="chip chip-warning">Soon</span>
    </div>
    <div className="mini-row">
      <div className="avatar av-4">HV</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, color: 'var(--color-link)' }}>Harbour View Suites</div>
        <div style={{ color: 'var(--color-bodytext)', fontSize: 11 }}>16:30 · Office</div>
      </div>
      <span className="chip chip-info">Queued</span>
    </div>
  </div>;


const MiniStatCard = ({ style, label = 'Jobs this week', value = '128', delta = '+12%' }) =>
<div className="iso-card" style={{ padding: 18, ...style }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div style={{ fontSize: 11, color: 'var(--color-bodytext)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
        {label}
      </div>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--color-lightprimary)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="solar:case-round-linear" size={16} />
      </div>
    </div>
    <div style={{ fontSize: 30, fontWeight: 800, color: 'var(--color-link)', marginTop: 8, lineHeight: 1, letterSpacing: '-0.02em' }}>{value}</div>
    <div style={{ fontSize: 12, color: 'var(--color-success)', fontWeight: 700, marginTop: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
      <Icon name="solar:alt-arrow-up-bold" size={12} /> {delta} vs last
    </div>
    {/* mini sparkline */}
    <svg viewBox="0 0 120 32" style={{ width: '100%', height: 28, marginTop: 10 }}>
      <defs>
        <linearGradient id="spark" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--color-primary)" stopOpacity="0.3" />
          <stop offset="100%" stopColor="var(--color-primary)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d="M0 24 L20 18 L40 22 L60 12 L80 16 L100 6 L120 10 L120 32 L0 32 Z" fill="url(#spark)" />
      <path d="M0 24 L20 18 L40 22 L60 12 L80 16 L100 6 L120 10" fill="none" stroke="var(--color-primary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </div>;


const MiniNotifCard = ({ style }) =>
<div className="iso-card" style={{ padding: 14, ...style }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--color-lightsuccess)', color: 'var(--color-success)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
        <Icon name="solar:check-circle-bold" size={20} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--color-link)' }}>Job completed</div>
        <div style={{ fontSize: 11, color: 'var(--color-bodytext)', marginTop: 2, lineHeight: 1.4 }}>Maya signed off Crescent Clinic — 2 min ago</div>
      </div>
    </div>
  </div>;


const MiniCalendarCard = ({ style }) => {
  const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
  const cells = Array.from({ length: 28 }, (_, i) => i);
  const filled = new Set([2, 5, 7, 9, 12, 14, 16, 19, 22, 25]);
  const highlight = new Set([9, 14, 22]);
  return (
    <div className="iso-card" style={{ padding: 16, ...style }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--color-link)' }}>May 2026</div>
        <div style={{ display: 'flex', gap: 4 }}>
          <Icon name="solar:alt-arrow-left-bold" size={14} style={{ color: 'var(--color-bodytext)' }} />
          <Icon name="solar:alt-arrow-right-bold" size={14} style={{ color: 'var(--color-bodytext)' }} />
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, fontSize: 9, color: 'var(--color-bodytext)', fontWeight: 700, textTransform: 'uppercase' }}>
        {days.map((d, i) => <div key={i} style={{ textAlign: 'center' }}>{d}</div>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginTop: 6 }}>
        {cells.map((i) =>
        <div key={i} style={{
          aspectRatio: '1',
          borderRadius: 6,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 10, fontWeight: 600,
          background: highlight.has(i) ? 'var(--color-primary)' : filled.has(i) ? 'var(--color-lightprimary)' : 'transparent',
          color: highlight.has(i) ? '#fff' : filled.has(i) ? 'var(--color-primary)' : 'var(--color-bodytext)'
        }}>{i + 1}</div>
        )}
      </div>
    </div>);

};

const MiniMessageCard = ({ style }) =>
<div className="iso-card" style={{ padding: 14, ...style }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
      <div className="avatar av-2">JL</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--color-link)' }}>Jordan L.</div>
        <div style={{ fontSize: 10, color: 'var(--color-bodytext)' }}>Crew lead</div>
      </div>
      <span className="chip chip-success" style={{ fontSize: 9 }}>● online</span>
    </div>
    <div style={{ background: 'var(--color-lightgray)', borderRadius: 10, padding: '8px 10px', fontSize: 11, color: 'var(--color-link)', marginBottom: 6 }}>
      Heading to Maple Kitchen now 🧹
    </div>
    <div style={{ background: 'var(--color-primary)', color: '#fff', borderRadius: 10, padding: '8px 10px', fontSize: 11, marginLeft: 24, fontWeight: 500 }}>
      Great — supply restock is in the van.
    </div>
  </div>;


const MiniInvoiceCard = ({ style }) =>
<div className="iso-card" style={{ padding: 16, ...style }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
      <div>
        <div style={{ fontSize: 10, color: 'var(--color-bodytext)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em' }}>Invoice</div>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--color-link)', marginTop: 2 }}>#LP-2412</div>
      </div>
      <span className="chip chip-success">Paid</span>
    </div>
    <div style={{ fontSize: 11, color: 'var(--color-bodytext)' }}>Riverside Plaza</div>
    <div style={{ fontSize: 26, fontWeight: 800, color: 'var(--color-link)', marginTop: 6, letterSpacing: '-0.02em' }}>$1,240</div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--color-border)' }}>
      <Icon name="solar:card-linear" size={14} style={{ color: 'var(--color-primary)' }} />
      <span style={{ fontSize: 11, color: 'var(--color-bodytext)' }}>Stripe · Apr 28</span>
    </div>
  </div>;


/* ── Phone frame (for PWA variation) ─────────────────────────────────── */
const PhoneMock = ({ style }) =>
<div style={{
  position: 'absolute',
  width: 220, height: 440,
  borderRadius: 32,
  background: '#0b1322',
  padding: 7,
  boxShadow: '0 50px 100px -30px rgba(31,52,82,0.45), 0 20px 40px -15px rgba(31,52,82,0.2), inset 0 0 0 1px rgba(255,255,255,0.06)',
  transformStyle: 'preserve-3d',
  ...style
}}>
    <div style={{
    width: '100%', height: '100%',
    borderRadius: 25,
    background: '#fff',
    overflow: 'hidden',
    position: 'relative'
  }}>
      {/* notch */}
      <div style={{
      position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
      width: 76, height: 22, background: '#0b1322', borderRadius: 999, zIndex: 2
    }}></div>
      {/* status bar */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 18px 0', fontSize: 10, fontWeight: 700, color: 'var(--color-link)' }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 4, color: 'var(--color-link)' }}>
          <Icon name="solar:wifi-router-minimalistic-bold" size={11} />
          <Icon name="solar:battery-full-bold" size={13} />
        </div>
      </div>
      {/* header */}
      <div style={{ padding: '14px 14px 10px' }}>
        <div style={{ fontSize: 10, color: 'var(--color-bodytext)', fontWeight: 600 }}>Good morning</div>
        <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--color-link)', letterSpacing: '-0.01em', lineHeight: 1.2 }}>Maya, <span style={{ color: 'var(--color-primary)' }}>4 jobs</span> today.</div>
      </div>
      {/* job card */}
      <div style={{ margin: '0 12px', borderRadius: 12, background: 'linear-gradient(135deg, var(--color-primary), #5d87ff)', color: '#fff', padding: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.2)' }}>NEXT · 11:30</span>
          <Icon name="solar:map-point-linear" size={12} />
        </div>
        <div style={{ fontSize: 14, fontWeight: 700, marginTop: 8 }}>Maple Kitchen</div>
        <div style={{ fontSize: 10, opacity: 0.85, marginTop: 2 }}>14 Maple Ave · Residential</div>
        <button style={{ background: '#fff', color: 'var(--color-primary)', border: 0, width: '100%', padding: '7px 0', borderRadius: 7, marginTop: 10, fontWeight: 700, fontSize: 11 }}>
          Start job →
        </button>
      </div>
      {/* list */}
      <div style={{ padding: '10px 14px' }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--color-bodytext)', textTransform: 'uppercase', letterSpacing: '.04em', marginBottom: 8 }}>Up next</div>
        {[
      { name: 'Crescent Clinic', time: '14:00', chip: 'Medical' },
      { name: 'Harbour View', time: '16:30', chip: 'Office' },
      { name: 'Westgate Bakery', time: '18:00', chip: 'Retail' }].
      map((j, i) =>
      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: i < 2 ? '1px solid var(--color-border)' : 0 }}>
            <div style={{ width: 26, height: 26, borderRadius: 7, background: 'var(--color-lightprimary)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 10 }}>
              {j.time.slice(0, 2)}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--color-link)' }}>{j.name}</div>
              <div style={{ fontSize: 9, color: 'var(--color-bodytext)' }}>{j.chip}</div>
            </div>
            <Icon name="solar:alt-arrow-right-bold" size={12} style={{ color: 'var(--color-bodytext)' }} />
          </div>
      )}
      </div>
    </div>
  </div>;


/* ── HERO VARIATION 1 — TOWER (Dashboard stack with floating mini cards) */
function HeroTower() {
  // Apply isometric tilt via CSS variable in transform
  return (
    <div className="hero-visual">
      <div className="scene">
        {/* floor sphere accent */}
        <div className="float-shape shape-sphere f1" style={{ top: '6%', right: '4%', width: 70, height: 70 }}></div>
        <div className="float-shape shape-ring f3" style={{ bottom: '12%', left: '-2%', width: 90, height: 90, borderWidth: 8 }}></div>

        {/* main dashboard card — back */}
        <div className="iso-card f2" style={{
          left: '10%', top: '4%', width: '74%', height: '78%',
          transform: 'rotateY(-18deg) rotateX(8deg) rotateZ(-1deg) translateZ(0)'
        }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 26, height: 26, borderRadius: 7, background: 'linear-gradient(135deg, #34d399, #3b82f6)' }}></div>
              <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--color-primary)' }}>luppy</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--color-bodytext)' }}>
              <Icon name="solar:magnifer-linear" size={14} />
              <Icon name="solar:bell-linear" size={14} />
              <div className="avatar av-1" style={{ width: 22, height: 22, fontSize: 10 }}>BC</div>
            </div>
          </div>
          <div style={{ padding: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <div>
                <div style={{ fontSize: 11, color: 'var(--color-bodytext)', fontWeight: 600 }}>Dashboard</div>
                <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--color-link)' }}>Good morning, Sam</div>
              </div>
              <div style={{ background: 'var(--color-primary)', color: '#fff', fontSize: 11, fontWeight: 700, padding: '7px 12px', borderRadius: 8 }}>
                + Add Job
              </div>
            </div>
            {/* stat row */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
              {[
              { l: 'Today', v: '12', c: 'var(--color-primary)' },
              { l: 'In progress', v: '4', c: 'var(--color-warning)' },
              { l: 'Completed', v: '8', c: 'var(--color-success)' }].
              map((s, i) =>
              <div key={i} style={{ border: '1px solid var(--color-border)', borderRadius: 10, padding: 10 }}>
                  <div style={{ fontSize: 9, color: 'var(--color-bodytext)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em' }}>{s.l}</div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--color-link)', lineHeight: 1, marginTop: 4 }}>{s.v}</div>
                  <div style={{ height: 3, background: s.c, marginTop: 8, borderRadius: 2, opacity: 0.5 }}></div>
                </div>
              )}
            </div>
            {/* mini chart */}
            <div style={{ border: '1px solid var(--color-border)', borderRadius: 10, padding: 12, marginBottom: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--color-link)' }}>Jobs this week</div>
                <div style={{ fontSize: 10, color: 'var(--color-success)', fontWeight: 700 }}>+18% ↑</div>
              </div>
              <svg viewBox="0 0 200 60" style={{ width: '100%', height: 50 }}>
                <defs>
                  <linearGradient id="chartG" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
                    <stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <path d="M0 45 L25 38 L50 42 L75 30 L100 28 L125 18 L150 22 L175 12 L200 16 L200 60 L0 60 Z" fill="url(#chartG)" />
                <path d="M0 45 L25 38 L50 42 L75 30 L100 28 L125 18 L150 22 L175 12 L200 16" stroke="#3b82f6" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
          </div>
        </div>

        {/* floating mini cards over the dashboard */}
        <MiniStatCard style={{
          left: '-2%', top: '38%', width: 220,
          transform: 'rotateY(-10deg) rotateX(6deg) translateZ(80px)'
        }} />

        <div className="f2" style={{ position: 'absolute', left: '52%', top: '-2%', width: 240, transform: 'rotateY(-22deg) rotateX(8deg) translateZ(60px)' }}>
          <MiniNotifCard />
        </div>

        <div className="f3" style={{ position: 'absolute', right: '-4%', top: '40%', width: 230, transform: 'rotateY(-14deg) rotateX(6deg) translateZ(120px)' }}>
          <MiniJobsCard style={{ position: 'relative', width: '100%' }} />
        </div>

        <div className="f1" style={{ position: 'absolute', right: '6%', bottom: '-2%', width: 200, transform: 'rotateY(-16deg) rotateX(6deg) translateZ(140px)' }}>
          <MiniInvoiceCard />
        </div>

        {/* sparkles */}
        <div className="sparkle" style={{ top: '14%', left: '46%' }}></div>
        <div className="sparkle" style={{ top: '64%', left: '22%', background: 'var(--color-secondary)', boxShadow: '0 0 0 4px rgba(20,184,166,0.18)' }}></div>
        <div className="sparkle" style={{ bottom: '10%', right: '32%' }}></div>
      </div>
    </div>);

}

/* ── HERO VARIATION 2 — PWA (phone + desktop) ───────────────────────── */
function HeroPwa() {
  return (
    <div className="hero-visual">
      <div className="scene">
        {/* desktop in back */}
        <div className="iso-card f2" style={{
          left: '20%', top: '4%', width: '78%', height: '70%',
          transform: 'rotateY(-22deg) rotateX(10deg) rotateZ(-2deg) translateZ(-40px)'
        }}>
          <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: '#ff5f57' }}></span>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: '#febc2e' }}></span>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: '#28c840' }}></span>
            <div style={{ marginLeft: 'auto', marginRight: 'auto', fontSize: 10, color: 'var(--color-bodytext)', background: 'var(--color-lightgray)', padding: '3px 10px', borderRadius: 6 }}>app.luppy.app/jobs</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '70px 1fr', height: 'calc(100% - 38px)' }}>
            <div style={{ background: 'var(--color-lightgray)', borderRight: '1px solid var(--color-border)', padding: '14px 8px', display: 'flex', flexDirection: 'column', gap: 6 }}>
              {['solar:home-angle-linear', 'solar:case-round-linear', 'solar:calendar-linear', 'solar:users-group-rounded-linear', 'solar:map-point-linear', 'solar:bill-list-linear'].map((ic, i) =>
              <div key={i} style={{
                width: 38, height: 38, borderRadius: 10,
                background: i === 1 ? 'var(--color-primary)' : 'transparent',
                color: i === 1 ? '#fff' : 'var(--color-bodytext)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                  <Icon name={ic} size={18} />
                </div>
              )}
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontSize: 11, color: 'var(--color-bodytext)', fontWeight: 600 }}>Jobs</div>
              <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--color-link)', marginBottom: 12 }}>All jobs</div>
              {[
              { n: 'Riverside Plaza', t: '09:00', c: 'chip-success', s: 'Completed' },
              { n: 'Maple Kitchen', t: '11:30', c: 'chip-primary', s: 'In progress' },
              { n: 'Crescent Clinic', t: '14:00', c: 'chip-warning', s: 'Soon' },
              { n: 'Harbour View', t: '16:30', c: 'chip-info', s: 'Queued' }].
              map((j, i) =>
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 3 ? '1px solid var(--color-border)' : 0 }}>
                  <div className={`avatar ${['av-1', 'av-2', 'av-3', 'av-4'][i]}`} style={{ width: 24, height: 24, fontSize: 10 }}>{j.n.slice(0, 2)}</div>
                  <div style={{ flex: 1, fontSize: 11, fontWeight: 600, color: 'var(--color-link)' }}>{j.n}</div>
                  <div style={{ fontSize: 10, color: 'var(--color-bodytext)' }}>{j.t}</div>
                  <span className={`chip ${j.c}`}>{j.s}</span>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* phone in front */}
        <div className="f1" style={{ position: 'absolute', left: '-4%', bottom: '-2%', width: 220, height: 440, transform: 'rotateY(-12deg) rotateX(4deg) translateZ(120px)' }}>
          <PhoneMock style={{ position: 'relative', width: '100%', height: '100%' }} />
        </div>

        {/* floating cube + shapes */}
        <div className="float-shape shape-cube f2" style={{ top: '0%', right: '-2%', width: 70, height: 70 }}></div>
        <div className="float-shape shape-sphere f3" style={{ bottom: '14%', right: '6%', width: 60, height: 60 }}></div>

        {/* "install" badge */}
        <div className="iso-card f2" style={{
          right: '4%', top: '32%', width: 210, padding: 12,
          transform: 'rotateY(-12deg) rotateX(6deg) translateZ(160px)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #34d399, #3b82f6)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
              <Icon name="solar:global-linear" size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--color-link)' }}>Works right in the browser</div>
              <div style={{ fontSize: 10, color: 'var(--color-bodytext)' }}>No app to install · 0 MB</div>
            </div>
          </div>
        </div>

        {/* sparkles */}
        <div className="sparkle" style={{ top: '20%', left: '36%' }}></div>
        <div className="sparkle" style={{ bottom: '20%', right: '24%', background: 'var(--color-secondary)', boxShadow: '0 0 0 4px rgba(20,184,166,0.18)' }}></div>
      </div>
    </div>);

}

/* ── HERO VARIATION 3 — LAYERS (exploded parallel planes) ───────────── */
function HeroLayers() {
  return (
    <div className="hero-visual">
      <div className="scene" style={{ transform: 'rotateY(-18deg) rotateX(10deg) rotateZ(-2deg)' }}>
        {/* Calendar — back-left */}
        <div className="f2" style={{ position: 'absolute', left: '-6%', top: '6%', width: 220, transform: 'translateZ(0px)' }}>
          <MiniCalendarCard />
        </div>

        {/* Jobs — back-right (largest) */}
        <div className="f3" style={{ position: 'absolute', right: '-8%', top: '18%', width: 240, transform: 'translateZ(60px)' }}>
          <MiniJobsCard style={{ position: 'relative', width: '100%' }} />
        </div>

        {/* Stat card — mid-left */}
        <div className="f1" style={{ position: 'absolute', left: '4%', bottom: '4%', width: 200, transform: 'translateZ(140px)' }}>
          <MiniStatCard label="Hours saved / wk" value="42h" delta="+8h" />
        </div>

        {/* Invoice — front-center */}
        <div className="f3" style={{ position: 'absolute', right: '18%', bottom: '0%', width: 180, transform: 'translateZ(220px)' }}>
          <MiniInvoiceCard />
        </div>

        {/* Notif — top floating */}
        <div className="f2" style={{ position: 'absolute', left: '36%', top: '-4%', width: 200, transform: 'translateZ(180px)' }}>
          <MiniNotifCard />
        </div>

        {/* Shapes */}
        <div className="float-shape shape-sphere f1" style={{ left: '34%', bottom: '32%', width: 50, height: 50, transform: 'translateZ(100px)' }}></div>
        <div className="float-shape shape-cube f2" style={{ right: '6%', top: '0%', width: 46, height: 46, transform: 'translateZ(60px)' }}></div>

        {/* sparkles */}
        <div className="sparkle" style={{ top: '14%', left: '52%' }}></div>
        <div className="sparkle" style={{ bottom: '36%', left: '24%', background: 'var(--color-secondary)', boxShadow: '0 0 0 4px rgba(20,184,166,0.18)' }}></div>
        <div className="sparkle" style={{ top: '50%', right: '14%' }}></div>
      </div>
    </div>);

}

/* ── Phone frame with a live text-message thread (for Texting variation) ── */
const PhoneChatMock = ({ style }) =>
<div style={{
  position: 'absolute',
  width: 220, height: 440,
  borderRadius: 32,
  background: '#0b1322',
  padding: 7,
  boxShadow: '0 50px 100px -30px rgba(31,52,82,0.45), 0 20px 40px -15px rgba(31,52,82,0.2), inset 0 0 0 1px rgba(255,255,255,0.06)',
  transformStyle: 'preserve-3d',
  ...style
}}>
    <div style={{
    width: '100%', height: '100%',
    borderRadius: 25,
    background: '#fff',
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    flexDirection: 'column'
  }}>
      {/* notch */}
      <div style={{
      position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
      width: 76, height: 22, background: '#0b1322', borderRadius: 999, zIndex: 2
    }}></div>
      {/* status bar */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 18px 0', fontSize: 10, fontWeight: 700, color: 'var(--color-link)' }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 4, color: 'var(--color-link)' }}>
          <Icon name="solar:wifi-router-minimalistic-bold" size={11} />
          <Icon name="solar:battery-full-bold" size={13} />
        </div>
      </div>
      {/* thread header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 14px 10px', borderBottom: '1px solid var(--color-border)' }}>
        <div className="avatar av-2" style={{ width: 30, height: 30, fontSize: 12 }}>JL</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--color-link)' }}>Jordan · Crew lead</div>
          <div style={{ fontSize: 9, color: 'var(--color-success)', fontWeight: 600 }}>● Active now</div>
        </div>
        <Icon name="solar:phone-linear" size={15} style={{ color: 'var(--color-primary)' }} />
      </div>
      {/* message thread */}
      <div style={{ flex: 1, padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
        <div style={{ alignSelf: 'flex-start', maxWidth: '80%', background: 'var(--color-lightgray)', borderRadius: '12px 12px 12px 3px', padding: '8px 11px', fontSize: 11, color: 'var(--color-link)' }}>
          Heading to Maple Kitchen now 🧹
        </div>
        <div style={{ alignSelf: 'flex-end', maxWidth: '80%', background: 'var(--color-primary)', color: '#fff', borderRadius: '12px 12px 3px 12px', padding: '8px 11px', fontSize: 11, fontWeight: 500 }}>
          Got it — supply restock is in the van.
        </div>
        <div style={{ alignSelf: 'flex-start', maxWidth: '80%', background: 'var(--color-lightgray)', borderRadius: '12px 12px 12px 3px', padding: '8px 11px', fontSize: 11, color: 'var(--color-link)' }}>
          On it. Done by 11:15!
        </div>
        <div style={{ alignSelf: 'center', fontSize: 9, color: 'var(--color-bodytext)', fontWeight: 600, margin: '4px 0' }}>Job auto-marked complete</div>
        <div style={{ alignSelf: 'flex-start', display: 'flex', alignItems: 'center', gap: 8, background: 'var(--color-lightsuccess)', borderRadius: 12, padding: '8px 11px', width: '84%' }}>
          <Icon name="solar:check-circle-bold" size={16} style={{ color: 'var(--color-success)', flex: 'none' }} />
          <span style={{ fontSize: 10.5, color: 'var(--color-link)', fontWeight: 600 }}>Maple Kitchen marked done</span>
        </div>
      </div>
      {/* input row */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px 16px' }}>
        <div style={{ flex: 1, background: 'var(--color-lightgray)', borderRadius: 999, padding: '8px 14px', fontSize: 10, color: 'var(--color-bodytext)' }}>Text a job update…</div>
        <div style={{ width: 30, height: 30, borderRadius: 999, background: 'var(--color-primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
          <Icon name="solar:arrow-up-linear" size={15} />
        </div>
      </div>
    </div>
  </div>;


/* ── HERO VARIATION 4 — TEXTING (chat-thread hero, no app to install) ── */
function HeroTexting() {
  return (
    <div className="hero-visual">
      <div className="scene">
        <div className="float-shape shape-sphere f1" style={{ top: '4%', right: '8%', width: 60, height: 60 }}></div>
        <div className="float-shape shape-ring f3" style={{ bottom: '10%', left: '0%', width: 80, height: 80, borderWidth: 8 }}></div>

        {/* phone with live text thread — front and center */}
        <div className="f2" style={{ position: 'absolute', left: '50%', top: '2%', width: 220, height: 440, transform: 'translateX(-50%) rotateY(-10deg) rotateX(6deg) translateZ(100px)' }}>
          <PhoneChatMock style={{ position: 'relative', width: '100%', height: '100%' }} />
        </div>

        {/* supporting proof cards floating either side */}
        <div className="f3" style={{ position: 'absolute', left: '-6%', top: '46%', width: 210, transform: 'rotateY(-6deg) rotateX(4deg) translateZ(60px)' }}>
          <MiniNotifCard />
        </div>
        <div className="f1" style={{ position: 'absolute', right: '-4%', bottom: '6%', width: 200, transform: 'rotateY(-6deg) rotateX(4deg) translateZ(140px)' }}>
          <MiniStatCard label="Updates sent by text" value="96%" delta="+0 apps" />
        </div>

        {/* sparkles */}
        <div className="sparkle" style={{ top: '10%', left: '18%' }}></div>
        <div className="sparkle" style={{ top: '60%', right: '20%', background: 'var(--color-secondary)', boxShadow: '0 0 0 4px rgba(20,184,166,0.18)' }}></div>
        <div className="sparkle" style={{ bottom: '30%', left: '40%' }}></div>
      </div>
    </div>);

}

function HeroIllustration({ variant }) {
  if (variant === 'pwa') return <HeroPwa />;
  if (variant === 'layers') return <HeroLayers />;
  if (variant === 'texting') return <HeroTexting />;
  return <HeroTower />;
}

Object.assign(window, {
  HeroIllustration,
  HeroTower,
  HeroPwa,
  HeroLayers,
  HeroTexting,
  MiniJobsCard,
  MiniStatCard,
  MiniCalendarCard,
  MiniNotifCard,
  MiniMessageCard,
  MiniInvoiceCard,
  Icon
});