/* global React */
const { useState, useEffect, useRef } = React;

// ---------- Tiny SVG icons ----------
const Icon = ({ name, size = 18 }) => {
  const stroke = "currentColor";
  const sw = 1.6;
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'play':return <svg {...common}><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" /></svg>;
    case 'arrow':return <svg {...common} style={{ stroke: "rgb(255, 255, 255)" }}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>;
    case 'book':return <svg {...common}><path d="M4 5a2 2 0 0 1 2-2h12v16H6a2 2 0 0 0-2 2V5z" /><path d="M4 5v14" /></svg>;
    case 'wave':return <svg {...common}><path d="M3 12c2 0 2-4 4-4s2 8 4 8 2-12 4-12 2 8 4 8 2-4 4-4" /></svg>;
    case 'cog':return <svg {...common}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5h0a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></svg>;
    case 'chart':return <svg {...common}><path d="M3 3v18h18" /><path d="M7 14l3-3 3 3 5-5" /></svg>;
    case 'shield':return <svg {...common}><path d="M12 3l8 4v5c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V7l8-4z" /></svg>;
    case 'bot':return <svg {...common}><rect x="4" y="8" width="16" height="12" rx="2" /><path d="M12 4v4" /><circle cx="9" cy="14" r="1" /><circle cx="15" cy="14" r="1" /></svg>;
    case 'mic':return <svg {...common}><rect x="9" y="3" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0" /><line x1="12" y1="18" x2="12" y2="22" /></svg>;
    case 'check':return <svg {...common}><polyline points="5 13 10 18 19 7" /></svg>;
    case 'spark':return <svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" /></svg>;
    case 'lock':return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>;
    case 'wa':return <svg {...common}><path d="M20 12a8 8 0 1 1-3.2-6.4L20 4l-1.4 3.2A8 8 0 0 1 20 12z" /><path d="M9 9.5c0 3 2.5 5.5 5.5 5.5l1.5-1.5-2-1L13 13.5c-1 0-2-1-2-2l.5-1-1-2L9 9.5z" /></svg>;
    case 'logo-box':return <svg {...common} viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4" /><path d="M3 9h18M9 3v18" /></svg>;
    default:return null;
  }
};

// ---------- Nav ----------
function toggleTheme() {
  const cur = document.documentElement.getAttribute('data-theme') || 'dark';
  const next = cur === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  try { localStorage.setItem('pg-theme', next); } catch (e) {}
}

function Nav() {
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="/" aria-label="PackGuru home" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="/public/logo-optimized.webp" alt="PackGuru.Ai logo" className="nav-mark" width="32" height="32" loading="eager" decoding="async" style={{ width: 32, height: 32 }} />
          <span style={{ fontWeight: 600, fontSize: 18, letterSpacing: '-0.02em' }}>PackGuru</span>
        </a>
        <nav className="nav-links">
          <a href="/platform/">Platform</a>
          <a href="/line/">The line</a>
          <a href="/solutions/">Solutions</a>
          <a href="/customers/">Customers</a>
          <a href="/resources/">Resources</a>
          <a href="/company/about.html">Company</a>
          <a href="/interpack.html" style={{ color: 'var(--accent)', fontWeight: 600 }}>🎪 Interpack</a>
        </nav>
        <div className="nav-right" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button type="button" className="theme-toggle" onClick={toggleTheme} aria-label="Toggle theme">
            <svg className="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="5" /><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
            </svg>
            <svg className="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
            </svg>
          </button>
          <a href="https://app.packguru.ai" style={{ fontSize: 13, color: 'var(--ink-2)' }}>Login</a>
          <a className="nav-cta" href="/demo.html">Request walkthrough →</a>
        </div>
      </div>
    </header>);

}

// ---------- Hero ----------
function Hero({ accent }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <h1 className="display" style={{ marginTop: 8 }}>
              The <span className="it">cosmetics factory</span> <br />
              <span className="accent">brain</span>
            </h1>
            <p className="lead" style={{ marginTop: 28 }}>
              One AI layer across every machine on the line — from unscrambler to palletiser.
              Captures every operator action, machine event, and SKU recipe. Serves the right answer
              to the right operator, on the surface they already use.
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary" href="/demo.html" style={{ color: "rgb(255, 255, 255)" }}>Request walkthrough <Icon name="arrow" /></a>
              <a className="btn" href="https://wa.me/48691914226?text=Hi%20PackGuru%20%E2%80%94%20I%27d%20like%20to%20know%20more" style={{ padding: "14px 22px" }}><Icon name="wa" size={16} /> Talk on WhatsApp</a>
            </div>
            <div className="hero-meta">
              <span className="item">SOC 2 Certified</span>
              <span className="item">ISA/IEC 62443</span>
              <span className="item">GDPR</span>
              <span className="item">EU AI Act ready · Aug 2026</span>
            </div>
          </div>
          <KnowledgeGraph />
        </div>

        <div style={{ marginTop: 96 }}>
          <div className="stat-grid">
            <div className="stat"><div className="num">30+</div><div className="label">Languages supported</div></div>
            <div className="stat"><div className="num">24/7</div><div className="label">AI-powered assistance</div></div>
            <div className="stat"><div className="num">99.5<span style={{ fontSize: '0.55em', color: 'var(--ink-3)' }}>%</span></div><div className="label">Platform uptime SLA</div></div>
            <div className="stat"><div className="num">40<span style={{ fontSize: '0.55em', color: 'var(--ink-3)' }}>d</span></div><div className="label">Pilot to deployment</div></div>
          </div>
        </div>
      </div>
    </section>);

}

function HeroStack() {
  return (
    <div className="hero-stack" aria-hidden="true">
      {/* Big dashboard card */}
      <div className="hero-card" style={{ width: '90%', height: 360, top: 20, right: 0 }}>
        <div className="mock-chrome">
          <span className="dots"><span /><span /><span /></span>
          <span style={{ color: 'var(--ink-2)' }}>app.packguru.ai · Line L1 · Live</span>
          <span style={{ marginLeft: 'auto', color: 'var(--good)', display: 'flex', gap: 6, alignItems: 'center' }}>
            <span className="live-dot" /> EXECUTE
          </span>
        </div>
        <div style={{ padding: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <MiniStat label="OEE" val="87.4" delta="+2.1" />
          <MiniStat label="Bottles / hr" val="14,820" delta="+960" />
          <div style={{ gridColumn: '1 / -1', height: 130, borderRadius: 10, border: '1px solid var(--line)', padding: 14, position: 'relative', overflow: 'hidden' }}>
            <div className="tiny" style={{ marginBottom: 10 }}>Speed loss · last 8h</div>
            <ChartSpark />
          </div>
        </div>
      </div>

      {/* WhatsApp floating mock */}
      <div className="hero-card" style={{ width: 280, top: 270, left: 0 }}>
        <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div className="row">
            <div className="wa-avatar" style={{ width: 28, height: 28, fontSize: 11 }}>PG</div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 500 }}>PackGuru</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)', display: 'flex', gap: 6, alignItems: 'center' }}>
                <span className="live-dot" /> Online · 2s ago
              </div>
            </div>
          </div>
          <div style={{
            background: 'rgba(167,139,250,0.1)',
            border: '1px solid rgba(167,139,250,0.2)',
            borderRadius: 10, padding: 10, fontSize: 12, lineHeight: 1.5, color: 'var(--ink-2)'
          }}>
            <div className="wa-pill"><Icon name="spark" size={10} /> ALARM · CAPPER 2</div>
            <div>Rotator camera issue. Clean lens, check bottle spacing.</div>
            <div className="wa-confidence"><Icon name="check" size={10} /> Confidence HIGH</div>
          </div>
        </div>
      </div>
    </div>);

}

const MiniStat = ({ label, val, delta }) =>
<div style={{ padding: 14, borderRadius: 10, border: '1px solid var(--line)' }}>
    <div className="tiny">{label}</div>
    <div style={{ fontSize: 26, letterSpacing: '-0.02em', marginTop: 4 }}>{val}</div>
    <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--good)', marginTop: 2 }}>▲ {delta}</div>
  </div>;


const ChartSpark = () =>
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none" style={{ marginTop: 6 }}>
    <defs>
      <linearGradient id="sparkG" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#a78bfa" stopOpacity="0.6" />
        <stop offset="100%" stopColor="#a78bfa" stopOpacity="0" />
      </linearGradient>
    </defs>
    <path d="M0 60 L30 50 L60 55 L90 35 L120 40 L150 20 L180 28 L210 18 L240 22 L280 10 L280 80 L0 80 Z" fill="url(#sparkG)" />
    <path d="M0 60 L30 50 L60 55 L90 35 L120 40 L150 20 L180 28 L210 18 L240 22 L280 10" fill="none" stroke="#a78bfa" strokeWidth="1.6" />
  </svg>;


// ---------- OEM Partner Strip ----------
function OEMStrip() {
  const partners = [
    { name: 'Unilogo',          logo: '/assets/logo-unilogo.webp' },
    { name: 'Macro Labelling',  logo: '/assets/logo-macrolabelling.svg' },
    { name: 'PE Labellers',     logo: '/assets/logo-pelabellers.svg' },
    { name: 'Fuji Seal',        logo: '/assets/logo-fujiseal.webp' },
    { name: 'Cermex',           logo: '/assets/logo-cermex.svg' },
    { name: 'TransNova',        logo: '/assets/logo-transnova.webp' },
    { name: 'Sidel',            logo: '/assets/logo-sidel.webp' },
  ];
  // Duplicate for seamless infinite scroll
  const loop = [...partners, ...partners, ...partners];
  return (
    <section className="section" id="partners" style={{ paddingTop: 0, paddingBottom: 64 }}>
      <div className="container" style={{ marginBottom: 36 }}>
        <div style={{ textAlign: 'center' }}>
          <span className="eyebrow" style={{ justifyContent: 'center' }}>The whole line</span>
          <p style={{ fontSize: 15, color: 'var(--ink-3)', marginTop: 8, maxWidth: '60ch', margin: '8px auto 0' }}>
            PackGuru orchestrates the line your competitors can only sell you in pieces
          </p>
        </div>
      </div>
      <div className="oem-marquee">
        <div className="oem-track">
          {loop.map((p, i) => (
            <div className="oem-logo" key={`${p.name}-${i}`}>
              <img src={p.logo} alt={`${p.name} — PackGuru OEM partner`} loading="lazy" decoding="async" />
            </div>
          ))}
        </div>
      </div>
      <div className="container">
        <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--ink-3)', marginTop: 32, fontFamily: 'var(--mono)' }}>
          One AI brain · Every brand on the line · OPC-UA · Modbus · MQTT · B&amp;R · Rockwell · Siemens
        </p>
      </div>
    </section>
  );
}

window.Nav = Nav;window.Hero = Hero;window.Icon = Icon;window.OEMStrip = OEMStrip;