// Home page — sidebar layout inspired by the Figma "Design starter"
// Reworked palette: warm paper + safety orange (was olive/lime)
const { useState: useStateH } = React;

function HomePage() {
  return (
    <SideRailLayout current="/">
      <HeroBlock />
      <BentoBlock />
      <ReliableBlock />
      <ImageBreaker />
      <FeatureIconsBlock />
      <HomeCTABlock />
    </SideRailLayout>
  );
}

// ---------- Layout: dark sidebar (left) + white content column ----------
function SideRailLayout({ children, current }) {
  return (
    <div className="srl" style={{
      minHeight: '100vh',
      background: 'var(--ink)',
      color: 'var(--paper)',
      display: 'grid',
      gridTemplateColumns: 'minmax(320px, 1fr) minmax(0, 820px) minmax(80px, 1fr)',
    }}>
      <aside className="srl-left" style={{
        padding: '34px 36px',
        position: 'sticky', top: 0,
        alignSelf: 'start',
        maxHeight: '100vh',
        overflow: 'auto',
        display: 'flex', flexDirection: 'column',
        gap: 40,
      }}>
        <SideHeader current={current} />
        <SideCopy />
        <SideModules />
        <SideBottomLinks />
      </aside>

      <div className="srl-main" style={{
        background: 'var(--paper)',
        color: 'var(--ink)',
        minHeight: '100vh',
      }}>
        {children}
        <Footer />
      </div>

      <div className="srl-right" aria-hidden />

      <style>{`
        @media (max-width: 1100px) {
          .srl { grid-template-columns: 1fr !important; }
          .srl-left { position: static !important; max-height: none !important; }
          .srl-right { display: none !important; }
        }
      `}</style>
    </div>
  );
}

function SideHeader({ current }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <Link to="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <LogoMark invert />
        <span style={{ fontWeight: 700, fontSize: 16, letterSpacing: '-0.02em' }}>IssuesId</span>
      </Link>
      <Btn href="#/contact" variant="accent" size="sm" onClick={e => { e.preventDefault(); window.location.hash = '/contact'; }}>
        Request demo
      </Btn>
    </div>
  );
}

function SideCopy() {
  return (
    <div style={{ marginTop: 30 }}>
      <h1 style={{
        fontFamily: 'var(--font-sans)', fontWeight: 500,
        fontSize: 'clamp(34px, 3.2vw, 44px)',
        lineHeight: 1.04, letterSpacing: '-0.025em', margin: '0 0 18px',
        color: 'var(--paper)', textWrap: 'balance',
      }}>
        Defect management <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>made simple.</span>
      </h1>
      <p style={{
        fontSize: 15, lineHeight: 1.5, margin: 0,
        color: 'color-mix(in oklab, var(--paper) 72%, transparent)',
        maxWidth: 320,
      }}>
        No paper registers. No missing photos. One tamper-proof record from first capture to compliance handover.
      </p>
    </div>
  );
}

function SideModules() {
  const mods = [
    { tag: 'Capture', body: 'Offline-first. Photos, location, trade tags — all on any phone.' },
    { tag: 'Assign', body: 'Route defects to the right trade in two taps. Auto-notify.' },
    { tag: 'Report', body: 'Generate compliance-ready PDFs for handover, in seconds.' },
  ];
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)',
        letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 18,
      }}>Our offerings</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {mods.map(m => (
          <div key={m.tag} style={{
            background: 'color-mix(in oklab, var(--paper) 6%, transparent)',
            border: '1px solid color-mix(in oklab, var(--paper) 14%, transparent)',
            borderRadius: 10,
            padding: '14px 16px',
          }}>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4, color: 'var(--paper)' }}>{m.tag}</div>
            <div style={{ fontSize: 12, lineHeight: 1.5, color: 'color-mix(in oklab, var(--paper) 65%, transparent)' }}>{m.body}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SideBottomLinks() {
  return (
    <div style={{
      marginTop: 'auto',
      display: 'flex', gap: 14, flexWrap: 'wrap',
      fontFamily: 'var(--font-mono)', fontSize: 11,
      color: 'color-mix(in oklab, var(--paper) 55%, transparent)',
      textTransform: 'uppercase', letterSpacing: '0.06em',
    }}>
      <span>Contact</span><span>Social</span><span>Address</span><span>Legal · Terms</span>
    </div>
  );
}

// ---------- Block primitive ----------
function Block({ children, style, pad = '72px 56px' }) {
  return <section style={{ padding: pad, ...style }}>{children}</section>;
}

function Headline({ eyebrow, title, subtitle, align = 'center' }) {
  return (
    <div style={{ textAlign: align, marginBottom: 36, maxWidth: align === 'center' ? 520 : 'none', marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>
      {eyebrow && (
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)',
          letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12,
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: 1 }} />
          {eyebrow}
        </div>
      )}
      <h2 style={{
        fontFamily: 'var(--font-sans)', fontWeight: 500,
        fontSize: 'clamp(30px, 3vw, 42px)',
        lineHeight: 1.04, letterSpacing: '-0.025em',
        margin: '0 0 12px', textWrap: 'balance',
      }}>{title}</h2>
      {subtitle && (
        <p style={{
          fontSize: 13, lineHeight: 1.55, color: 'var(--ink-3)',
          margin: 0, fontWeight: 500, textWrap: 'pretty',
          maxWidth: align === 'center' ? 400 : 'none',
          marginLeft: align === 'center' ? 'auto' : 0,
          marginRight: align === 'center' ? 'auto' : 0,
        }}>{subtitle}</p>
      )}
    </div>
  );
}

// ---------- Hero ----------
function HeroBlock() {
  return (
    <Block pad="48px 56px 56px">
      <div style={{
        borderRadius: 14,
        overflow: 'hidden',
        border: '1px solid var(--rule)',
        background: 'linear-gradient(180deg, var(--paper-2), var(--paper))',
        aspectRatio: '16 / 10',
        display: 'grid', placeItems: 'center',
        padding: 24,
      }}>
        <DashboardPreview />
      </div>
      <p style={{
        marginTop: 40, marginBottom: 0,
        textAlign: 'center',
        fontSize: 19, lineHeight: 1.3, letterSpacing: '-0.01em',
        maxWidth: 520, marginLeft: 'auto', marginRight: 'auto',
        textWrap: 'balance',
      }}>
        We <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>escalate</span> defect close-out and on-site compliance.
      </p>
      <LogoWall />
    </Block>
  );
}

function DashboardPreview() {
  const rows = [
    { id: 'DEF-0421', loc: 'L04 · BATH 2B', t: 'Silicone seal discontinuous', s: 'open' },
    { id: 'DEF-0422', loc: 'L04 · BATH 2C', t: 'Grout cracking at tile edge', s: 'assigned' },
    { id: 'DEF-0419', loc: 'L03 · KITCH', t: 'Cabinet door misaligned', s: 'resolved' },
    { id: 'DEF-0417', loc: 'L02 · ENTRY', t: 'Paint runs on architrave', s: 'assigned' },
  ];
  const statusStyle = {
    open: { c: 'var(--danger)', l: 'OPEN' },
    assigned: { c: 'var(--warn)', l: 'ASSIGNED' },
    resolved: { c: 'var(--ok)', l: 'RESOLVED' },
  };
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'var(--card)',
      border: '1px solid var(--rule)',
      borderRadius: 10,
      display: 'grid', gridTemplateRows: 'auto auto 1fr',
      overflow: 'hidden',
      boxShadow: '0 20px 40px -22px rgba(0,0,0,.18)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '10px 14px', borderBottom: '1px solid var(--rule)',
        background: 'var(--paper-2)',
      }}>
        {['#d94a3a', '#e5b800', '#45b26b'].map(c => (
          <span key={c} style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--rule-2)', border: '1px solid var(--rule)' }} />
        ))}
        <span style={{ marginLeft: 10, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
          app.issuesid.com / projects / PRJ-221
        </span>
        <span style={{ flex: 1 }} />
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ok)',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{ width: 6, height: 6, background: 'var(--ok)', borderRadius: '50%' }} />
          SYNCED · 09:41
        </span>
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '12px 16px', borderBottom: '1px solid var(--rule)',
      }}>
        <div style={{ fontWeight: 500, fontSize: 14 }}>Defect register</div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)',
          padding: '2px 7px', border: '1px solid var(--rule)', borderRadius: 3,
        }}>42 open</span>
        <span style={{ flex: 1 }} />
        <span style={{
          fontSize: 11, padding: '5px 10px', borderRadius: 4, fontWeight: 500,
          background: 'var(--accent)', color: 'oklch(0.18 0.04 55)',
        }}>+ New defect</span>
      </div>
      <div>
        {rows.map((r, i) => {
          const s = statusStyle[r.s];
          return (
            <div key={r.id} style={{
              display: 'grid',
              gridTemplateColumns: '90px 1fr 110px 100px 70px',
              gap: 10, padding: '11px 16px', alignItems: 'center',
              borderBottom: i < rows.length - 1 ? '1px solid var(--rule-2)' : 'none',
              fontSize: 12,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-3)' }}>{r.id}</span>
              <span style={{ fontWeight: 500, fontSize: 13 }}>{r.t}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)' }}>{r.loc}</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, color: s.c,
                display: 'inline-flex', alignItems: 'center', gap: 5,
              }}>
                <span style={{ width: 6, height: 6, background: s.c, borderRadius: '50%' }} />
                {s.l}
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', textAlign: 'right' }}>
                {i === 0 ? 'today' : i === 1 ? 'today' : i === 2 ? 'yest' : '2d'}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function LogoWall() {
  const logos = ['Hartley Build', 'Boral', 'Coastal', 'Meridian', 'Summit', 'Northeast'];
  return (
    <div style={{
      marginTop: 28,
      background: 'color-mix(in oklab, var(--accent) 6%, var(--paper-2))',
      border: '1px dashed var(--rule)',
      borderRadius: 10,
      padding: '22px 24px',
      display: 'flex', flexWrap: 'wrap', gap: 28,
      justifyContent: 'space-around', alignItems: 'center',
    }}>
      {logos.map(l => (
        <span key={l} style={{
          fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13,
          color: 'var(--accent-ink)', letterSpacing: '-0.01em',
        }}>{l}</span>
      ))}
    </div>
  );
}

// ---------- Bento ----------
function BentoBlock() {
  return (
    <Block>
      <Headline
        title="Get more done in a week"
        subtitle="Smarter tools that streamline your defect workflow, automate trade chasing, and keep sites on track."
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <BentoCard tint="accent">
          <BigNum value="3×" />
          <BentoLbl>Faster Defect Close-Out</BentoLbl>
        </BentoCard>
        <BentoCard tint="paper">
          <BentoChart />
          <BentoLbl>Efficiency Increase Per Site</BentoLbl>
        </BentoCard>
        <BentoCard tint="paper">
          <BentoNetwork />
          <BentoLbl>Centralize Every Trade</BentoLbl>
        </BentoCard>
        <BentoCard tint="accent">
          <BigNum value="100%" small />
          <BentoLbl>Offline Capable</BentoLbl>
        </BentoCard>
      </div>
    </Block>
  );
}

function BentoCard({ children, tint }) {
  const accent = tint === 'accent';
  return (
    <div style={{
      aspectRatio: '330 / 222',
      borderRadius: 12,
      background: accent
        ? 'color-mix(in oklab, var(--accent) 24%, var(--paper))'
        : 'var(--paper-2)',
      border: accent
        ? '1px solid color-mix(in oklab, var(--accent) 45%, transparent)'
        : '1px solid var(--rule)',
      padding: 26,
      display: 'flex', flexDirection: 'column',
      justifyContent: 'space-between', alignItems: 'center',
    }}>{children}</div>
  );
}

function BigNum({ value, small }) {
  return (
    <span style={{
      fontFamily: 'var(--font-sans)', fontWeight: 500,
      fontSize: small ? 72 : 92,
      letterSpacing: '-0.045em',
      color: 'var(--accent-ink)',
      lineHeight: 1, marginTop: 'auto', marginBottom: 'auto',
    }}>{value}</span>
  );
}

function BentoLbl({ children }) {
  return (
    <span style={{
      fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 14,
      color: 'var(--ink)', textAlign: 'center',
    }}>{children}</span>
  );
}

function BentoChart() {
  const heights = [22, 34, 48, 60, 76, 88, 100];
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 105, marginTop: 'auto', marginBottom: 'auto' }}>
      {heights.map((h, i) => (
        <div key={i} style={{
          width: 14, height: `${h}%`,
          background: i >= heights.length - 2 ? 'var(--accent)' : 'var(--ink)',
          borderRadius: 2,
        }} />
      ))}
    </div>
  );
}

function BentoNetwork() {
  return (
    <svg viewBox="0 0 200 110" width="190" height="105" style={{ marginTop: 'auto', marginBottom: 'auto' }}>
      <circle cx="100" cy="55" r="18" fill="var(--ink)" />
      {[[30,25],[170,25],[30,85],[170,85],[100,8],[100,102]].map(([x, y], i) => (
        <g key={i}>
          <line x1="100" y1="55" x2={x} y2={y} stroke="var(--ink)" strokeWidth="1" opacity=".3" strokeDasharray="2,2" />
          <circle cx={x} cy={y} r="7" fill="var(--accent)" stroke="var(--ink)" strokeWidth="1" />
        </g>
      ))}
    </svg>
  );
}

// ---------- Reliable ----------
function ReliableBlock() {
  const items = [
    {
      t: 'Scale your team, not your licence fees',
      b: 'Add inspectors, builders, and sub-contractors at no additional per-seat cost — built to support projects of any size.',
      visual: <ScaleVisual />,
    },
    {
      t: 'Effortless paper tracking, mobile convenience',
      b: 'Precise control at scale — lock any defect record, restrict edits after sign-off, and keep a tamper-proof audit trail.',
      visual: <PaperVisual />,
    },
  ];
  return (
    <Block style={{ borderTop: '1px solid var(--rule)' }}>
      <Headline title="The most reliable app on site." />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {items.map(c => (
          <div key={c.t}>
            <div style={{
              borderRadius: 11, overflow: 'hidden',
              border: '1px solid var(--rule)',
              background: 'var(--paper-2)',
              aspectRatio: '330 / 256',
              display: 'grid', placeItems: 'center',
            }}>{c.visual}</div>
            <div style={{ marginTop: 18, fontWeight: 500, fontSize: 13 }}>{c.t}</div>
            <div style={{ marginTop: 6, fontSize: 12, lineHeight: 1.55, color: 'var(--ink-3)' }}>{c.b}</div>
          </div>
        ))}
      </div>
    </Block>
  );
}

function ScaleVisual() {
  return (
    <div style={{ position: 'relative', width: '65%', aspectRatio: '1.6' }}>
      {[0, 1, 2].map(i => (
        <div key={i} style={{
          position: 'absolute', inset: 0,
          transform: `translate(${i*12}px, ${-i*10}px) rotate(${(i-1)*2}deg)`,
          background: i === 2 ? 'var(--accent)' : i === 1 ? 'var(--ink)' : 'var(--card)',
          color: i === 1 ? 'var(--paper)' : i === 2 ? 'oklch(0.18 0.04 55)' : 'var(--ink)',
          border: '1px solid var(--rule)',
          borderRadius: 8,
          padding: 14,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          boxShadow: '0 8px 20px -8px rgba(0,0,0,.25)',
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.04em',
        }}>
          <div style={{ opacity: 0.7, textTransform: 'uppercase' }}>Defect card</div>
          <div style={{ fontSize: 18, letterSpacing: '-0.01em', fontFamily: 'var(--font-sans)', fontWeight: 500 }}>
            DEF-042{i+1}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>L0{4-i}</span>
            <span style={{ width: 6, height: 6, background: 'currentColor', opacity: 0.5, borderRadius: '50%' }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function PaperVisual() {
  const rows = [
    ['08:12', 'CAPTURED', 'K.Hartley', 'var(--ink-3)'],
    ['08:14', 'ASSIGNED', 'Wet Seal Co.', 'var(--warn)'],
    ['11:30', 'IN PROGRESS', 'J.Silva', 'var(--accent)'],
    ['16:02', 'RESOLVED', 'J.Silva', 'var(--ok)'],
    ['16:04', 'SIGNED OFF', 'K.Hartley', 'var(--ok)'],
  ];
  return (
    <div style={{
      width: '74%', background: 'var(--card)', border: '1px solid var(--rule)',
      borderRadius: 6, padding: 16,
      fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-2)', lineHeight: 1.6,
      transform: 'rotate(-1.5deg)',
      boxShadow: '0 10px 25px -10px rgba(0,0,0,.18)',
    }}>
      <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--ink)', marginBottom: 6, letterSpacing: '0.04em' }}>
        AUDIT TRAIL · DEF-0421
      </div>
      <div style={{ height: 1, background: 'var(--rule)', margin: '6px 0' }} />
      {rows.map(([t, s, by, c]) => (
        <div key={t} style={{ display: 'grid', gridTemplateColumns: '40px 85px 1fr', gap: 4, alignItems: 'center' }}>
          <span style={{ color: 'var(--ink-3)' }}>{t}</span>
          <span style={{ color: c, fontWeight: 500 }}>{s}</span>
          <span style={{ color: 'var(--ink-3)' }}>{by}</span>
        </div>
      ))}
    </div>
  );
}

// ---------- Image breaker ----------
function ImageBreaker() {
  return (
    <Block pad="40px 56px 40px">
      <div style={{
        width: '100%', aspectRatio: '680 / 350',
        borderRadius: 12, overflow: 'hidden',
        background: `
          linear-gradient(160deg, color-mix(in oklab, var(--ink) 92%, transparent), color-mix(in oklab, var(--accent) 40%, var(--ink))),
          repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.04) 12px 13px)
        `,
        position: 'relative',
        color: 'var(--paper)',
        padding: 40,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'var(--accent)',
          display: 'inline-flex', alignItems: 'center', gap: 8, alignSelf: 'flex-start',
        }}>
          <span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: 1 }} />
          Site view · PRJ-221
        </div>
        <div>
          <div style={{
            fontFamily: 'var(--font-sans)', fontWeight: 500,
            fontSize: 'clamp(28px, 3vw, 38px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', maxWidth: 520, textWrap: 'balance',
            marginBottom: 16,
          }}>
            Every defect, every photo, every sign-off — <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>one record.</span>
          </div>
          <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: 'color-mix(in oklab, var(--paper) 70%, transparent)' }}>
            <span>· 42 DEFECTS OPEN</span>
            <span>· 128 CLOSED · 30 DAYS</span>
            <span>· 5 TRADES ACTIVE</span>
          </div>
        </div>
      </div>
    </Block>
  );
}

// ---------- Feature icons ----------
function FeatureIconsBlock() {
  const features = [
    { icon: <IconCapture />, t: 'Instant capture', b: 'Snap, tag, describe — 12 seconds per defect.' },
    { icon: <IconSecure />, t: 'Secure & signed', b: 'Tamper-proof audit trail, ISO-aligned.' },
    { icon: <IconSync />, t: 'Auto-sync', b: 'Works offline. Syncs when signal returns.' },
    { icon: <IconReports />, t: 'PDF reports', b: 'Handover-ready in seconds, not hours.' },
  ];
  return (
    <Block>
      <Headline
        title="First-class software for real sites."
        subtitle="Real-time insights, seamless capture, and advanced tools to run your defect process effortlessly."
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="feat4">
        {features.map(f => (
          <div key={f.t} style={{ textAlign: 'center', padding: '8px 4px' }}>
            <div style={{
              width: 52, height: 52, borderRadius: 10,
              background: 'color-mix(in oklab, var(--accent) 18%, var(--paper))',
              border: '1px solid color-mix(in oklab, var(--accent) 35%, transparent)',
              margin: '0 auto 14px',
              display: 'grid', placeItems: 'center',
              color: 'var(--accent-ink)',
            }}>{f.icon}</div>
            <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 6 }}>{f.t}</div>
            <div style={{ fontSize: 12, lineHeight: 1.5, color: 'var(--ink-3)' }}>{f.b}</div>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 720px) { .feat4 { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </Block>
  );
}

function IconCapture() {
  return (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 8h3l2-2h6l2 2h3v11H4z"/><circle cx="12" cy="13" r="3.5"/></svg>);
}
function IconSecure() {
  return (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/><path d="M9 12l2.2 2.2L15 10"/></svg>);
}
function IconSync() {
  return (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 12a8 8 0 0113-6m3 6a8 8 0 01-13 6"/><path d="M17 3v4h-4M7 21v-4h4"/></svg>);
}
function IconReports() {
  return (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h7"/></svg>);
}

// ---------- CTA ----------
function HomeCTABlock() {
  return (
    <Block pad="40px 56px 80px">
      <div style={{
        borderRadius: 12, overflow: 'hidden',
        aspectRatio: '680 / 350',
        background: `
          linear-gradient(180deg, color-mix(in oklab, var(--ink) 30%, transparent) 0%, color-mix(in oklab, var(--ink) 85%, transparent) 100%),
          linear-gradient(120deg, color-mix(in oklab, var(--accent) 55%, var(--ink)), var(--ink))
        `,
        padding: 40,
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        color: 'var(--paper)',
        position: 'relative',
      }}>
        <div style={{ maxWidth: 340 }}>
          <h3 style={{
            fontFamily: 'var(--font-sans)', fontWeight: 500,
            fontSize: 'clamp(26px, 3vw, 34px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', margin: '0 0 16px',
            textWrap: 'balance',
          }}>
            Download IssuesId and run your register from your <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>phone.</span>
          </h3>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Btn to="/contact" variant="accent" size="md">Start free pilot</Btn>
            <Btn to="/pricing" variant="ghostLight" size="md">View pricing</Btn>
          </div>
        </div>
      </div>
    </Block>
  );
}

window.HomePage = HomePage;
window.SideRailLayout = SideRailLayout;
window.Block = Block;
window.Headline = Headline;