/* global React, useReveal, Btn, CornerTicks, Eyebrow */
const { useMemo: useMemoD } = React;

/* ---------- Store badges (brand-styled download buttons) ---------- */
function AppStoreBadge() {
  return (
    <a href="#" onClick={e => e.preventDefault()} className="store-badge"
       aria-label="Download on the App Store">
      <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" style={{ flexShrink: 0 }}>
        <path fill="currentColor" d="M17.05 12.04c-.03-2.6 2.13-3.85 2.22-3.91-1.21-1.77-3.1-2.01-3.77-2.04-1.6-.16-3.13.94-3.94.94-.81 0-2.07-.92-3.4-.89-1.75.03-3.36 1.02-4.26 2.58-1.82 3.15-.47 7.81 1.31 10.37.87 1.25 1.9 2.66 3.26 2.61 1.31-.05 1.8-.85 3.39-.85 1.58 0 2.03.85 3.41.82 1.41-.02 2.3-1.28 3.16-2.54.99-1.45 1.4-2.86 1.42-2.93-.03-.01-2.72-1.04-2.75-4.13z" />
        <path fill="currentColor" d="M14.94 5.19c.72-.87 1.2-2.08 1.07-3.29-1.03.04-2.28.69-3.02 1.56-.66.77-1.24 2-1.08 3.18 1.15.09 2.32-.58 3.03-1.45z" />
      </svg>
      <span className="store-badge-txt">
        <span className="store-badge-sm">Download on the</span>
        <span className="store-badge-lg">App Store</span>
      </span>
    </a>
  );
}

function GooglePlayBadge() {
  return (
    <a href="#" onClick={e => e.preventDefault()} className="store-badge"
       aria-label="Get it on Google Play">
      <svg width="20" height="22" viewBox="0 0 24 24" aria-hidden="true" style={{ flexShrink: 0 }}>
        <path fill="#00D3FF" d="M3.5 2.1c-.3.2-.5.6-.5 1v17.8c0 .4.2.8.5 1l10-10.9z" />
        <path fill="#00F076" d="M3.5 2.1l10 9.9 2.8-2.9L5.4 1.4C4.8.9 4 1.5 3.5 2.1z" />
        <path fill="#FFC900" d="M19.6 10.3l-3.3-1.9-2.8 2.9 2.8 2.9 3.3-1.9c.6-.4.6-1.6 0-2z" />
        <path fill="#FF3A44" d="M3.5 21.9c.5.6 1.3.7 1.9.2l10.9-6.2-2.8-2.9z" />
      </svg>
      <span className="store-badge-txt">
        <span className="store-badge-sm">Get it on</span>
        <span className="store-badge-lg">Google Play</span>
      </span>
    </a>
  );
}

/* ---------- Branded QR (deterministic, decorative) ---------- */
function QR({ size = 152 }) {
  const N = 25;
  const matrix = useMemoD(() => {
    const m = Array.from({ length: N }, () => Array(N).fill(false));
    const finder = (r, c) => {
      for (let i = 0; i < 7; i++) for (let j = 0; j < 7; j++) {
        const edge = i === 0 || i === 6 || j === 0 || j === 6;
        const inner = i >= 2 && i <= 4 && j >= 2 && j <= 4;
        if (edge || inner) m[r + i][c + j] = true;
      }
    };
    finder(0, 0); finder(0, N - 7); finder(N - 7, 0);
    const inFinder = (r, c) => (r < 8 && c < 8) || (r < 8 && c >= N - 8) || (r >= N - 8 && c < 8);
    const inLogo = (r, c) => r >= 10 && r <= 14 && c >= 10 && c <= 14;
    let seed = 0x6d2b79f5;
    const rnd = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
    for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
      if (!inFinder(r, c) && !inLogo(r, c) && rnd() > 0.52) m[r][c] = true;
    }
    return m;
  }, []);
  const cell = size / N;
  const rects = [];
  for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
    if (matrix[r][c]) rects.push(<rect key={r + '-' + c} x={c * cell} y={r * cell} width={cell} height={cell} rx={cell * 0.18} fill="#0A0E1A" />);
  }
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} role="img" aria-label="Scan to download">
      <rect width={size} height={size} rx="8" fill="#FFFFFF" />
      <g>{rects}</g>
      {/* center logo knockout */}
      <rect x={size * 0.38} y={size * 0.38} width={size * 0.24} height={size * 0.24} rx="5" fill="#FFFFFF" />
      <g transform={`translate(${size * 0.42} ${size * 0.42}) scale(${size * 0.16 / 320})`}>
        <path d="M160 62 L243 110 L243 210 L160 258 L77 210 L77 110 Z" fill="none" stroke="#F3B43B" strokeWidth="26" strokeLinejoin="miter" />
        <path d="M120 192 L160 138 L200 192" fill="none" stroke="#F3B43B" strokeWidth="24" strokeLinejoin="miter" />
      </g>
    </svg>
  );
}

function GetTheApp() {
  return (
    <section className="section" id="download">
      <div className="wrap">
        <div className="get-app reveal" style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr',
             gap: 'clamp(32px,5vw,64px)', alignItems: 'center', border: '1px solid var(--line)',
             borderRadius: 4, padding: 'clamp(28px,4vw,56px)', background: 'var(--bg-2)' }}>
          <div>
            <Eyebrow code="P9">Get Xaint</Eyebrow>
            <h2 className="h-xl" style={{ marginTop: 18, maxWidth: '16ch' }}>Carry Xaint in your pocket.</h2>
            <p className="lead" style={{ marginTop: 16, maxWidth: 460 }}>
              Download the field client for iOS and Android, or open the full console in any browser.
              Everything stays in sync, online or off.
            </p>
            <div className="store-row" style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
              <AppStoreBadge />
              <GooglePlayBadge />
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <div style={{ position: 'relative', padding: 12, border: '1px solid var(--line)', borderRadius: 10, background: 'var(--surface)' }}>
              <CornerTicks color="var(--accent)" inset={6} size={9} />
              <QR />
            </div>
            <span className="mono" style={{ fontSize: '0.66rem', letterSpacing: '0.14em', color: 'var(--ink-3)', textAlign: 'center' }}>
              SCAN TO DOWNLOAD
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Device visuals ---------- */
function PhoneVisual() {
  return (
    <svg viewBox="0 0 132 256" width="100%" height="100%" aria-hidden="true" style={{ maxHeight: 240 }}>
      <rect x="8" y="3" width="116" height="250" rx="22" fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="2.5" />
      <rect x="16" y="14" width="100" height="228" rx="13" fill="var(--bg)" stroke="var(--line)" strokeWidth="1" />
      <rect x="52" y="21" width="28" height="5" rx="2.5" fill="var(--line-2)" />
      {/* mini app: header + signal nodes + list */}
      <rect x="28" y="40" width="40" height="6" rx="3" fill="var(--accent)" />
      <line x1="28" y1="86" x2="104" y2="86" stroke="var(--line-2)" strokeWidth="1.5" strokeDasharray="3 4" />
      {[34, 58, 82, 106].map((x, i) => (<circle key={x} cx={x - 6} cy="86" r={i === 1 ? 5 : 3} fill={i === 1 ? 'var(--accent)' : 'var(--line-2)'} />))}
      {[120, 142, 164, 186, 208].map((y, i) => (
        <g key={y}>
          <rect x="28" y={y} width="76" height="12" rx="2" fill="none" stroke="var(--line)" strokeWidth="1" />
          <rect x="32" y={y + 4} width={i % 2 ? 30 : 44} height="4" rx="2" fill="var(--ink-3)" opacity="0.5" />
        </g>
      ))}
    </svg>
  );
}
function TabletVisual() {
  return (
    <svg viewBox="0 0 220 256" width="100%" height="100%" aria-hidden="true" style={{ maxHeight: 240 }}>
      <rect x="6" y="14" width="208" height="228" rx="16" fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="2.5" />
      <rect x="16" y="24" width="188" height="208" rx="8" fill="var(--bg)" stroke="var(--line)" strokeWidth="1" />
      {/* sidebar */}
      <rect x="16" y="24" width="52" height="208" rx="0" fill="var(--bg-2)" />
      <rect x="26" y="38" width="20" height="5" rx="2.5" fill="var(--accent)" />
      {[58, 76, 94, 112].map(y => (<rect key={y} x="26" y={y} width="32" height="4" rx="2" fill="var(--ink-3)" opacity="0.5" />))}
      {/* content: signal + grid */}
      <line x1="84" y1="60" x2="190" y2="60" stroke="var(--line-2)" strokeWidth="1.5" strokeDasharray="3 4" />
      {[92, 118, 144, 170].map((x, i) => (<circle key={x} cx={x} cy="60" r={i === 1 ? 5 : 3} fill={i === 1 ? 'var(--accent)' : 'var(--line-2)'} />))}
      {[0, 1, 2, 3].map(i => (
        <rect key={i} x={84 + (i % 2) * 56} y={84 + Math.floor(i / 2) * 50} width="50" height="42" rx="3" fill="none" stroke="var(--line)" strokeWidth="1" />
      ))}
    </svg>
  );
}
function DesktopVisual() {
  return (
    <svg viewBox="0 0 280 256" width="100%" height="100%" aria-hidden="true" style={{ maxHeight: 240 }}>
      <rect x="8" y="16" width="264" height="172" rx="10" fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="2.5" />
      <rect x="18" y="26" width="244" height="152" rx="4" fill="var(--bg)" stroke="var(--line)" strokeWidth="1" />
      {/* stand */}
      <rect x="120" y="188" width="40" height="22" fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="2" />
      <rect x="92" y="210" width="96" height="8" rx="4" fill="var(--line-2)" />
      {/* dashboard */}
      <rect x="30" y="38" width="46" height="6" rx="3" fill="var(--accent)" />
      <line x1="30" y1="74" x2="250" y2="74" stroke="var(--line-2)" strokeWidth="1.5" strokeDasharray="4 5" />
      {[40, 82, 124, 166, 208, 240].map((x, i) => (<circle key={x} cx={x} cy="74" r={i === 2 ? 5 : 3} fill={i === 2 ? 'var(--accent)' : 'var(--line-2)'} />))}
      {[0, 1, 2, 3].map(i => (
        <rect key={i} x={30 + i * 56} y="96" width="48" height="64" rx="3" fill="none" stroke="var(--line)" strokeWidth="1" />
      ))}
    </svg>
  );
}

const DEVICES = [
  { code: '01', name: 'Phone', tag: 'In the pocket', Visual: PhoneVisual,
    reqs: ['iOS 16 or later', 'Android 11 or later', 'Offline-first sync', '~150 MB free space'] },
  { code: '02', name: 'Tablet', tag: 'On the bench', Visual: TabletVisual,
    reqs: ['iPadOS 16 or later', 'Android 12 or later', 'Split-view ready', '~200 MB free space'] },
  { code: '03', name: 'Desktop & web', tag: 'In the control room', Visual: DesktopVisual,
    reqs: ['Chrome · Edge · Safari · Firefox', 'Windows 11 / macOS 13+', '1280×720 minimum', 'No install — runs in browser'] },
];

function DeviceMatrix() {
  return (
    <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 680, marginBottom: 'clamp(30px,4vw,52px)' }}>
          <Eyebrow code="P8">Every screen</Eyebrow>
          <h2 className="h-xl" style={{ marginTop: 18 }}>One line, every device.</h2>
          <p className="lead" style={{ marginTop: 16 }}>
            From the phone in a technician's hand to the control-room display — the same calibrated
            line, sized to the screen it runs on.
          </p>
        </div>
        <div className="device-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
          {DEVICES.map((d, i) => (
            <article key={d.code} className="claim reveal" style={{ '--rd': `${i * 90}ms`, display: 'flex', flexDirection: 'column' }}>
              <CornerTicks color="var(--accent)" />
              <div style={{ height: 240, display: 'grid', placeItems: 'center', padding: '4px 4px 22px',
                   borderBottom: '1px solid var(--line)', marginBottom: 22 }}>
                <d.Visual />
              </div>
              <div className="big">{d.tag}</div>
              <h3 style={{ marginTop: 10 }}>{d.name}</h3>
              <ul style={{ listStyle: 'none', margin: '18px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {d.reqs.map(r => (
                  <li key={r} className="mono" style={{ display: 'flex', gap: 10, alignItems: 'flex-start',
                       fontSize: '0.76rem', color: 'var(--ink-2)', letterSpacing: '0.02em', lineHeight: 1.4 }}>
                    <span style={{ color: 'var(--accent)' }}>+</span>{r}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GetTheApp, DeviceMatrix, AppStoreBadge, GooglePlayBadge, QR });