// landing-shared.jsx — shared primitives, nav, footer, marquee
// Visual system: Inter for body, Instrument Serif for editorial accents,
// JetBrains Mono for spec-tags. Brand blue + soft surfaces from the app.

const Logo = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M12 2 3 7v10l9 5 9-5V7z" fill="#3F6BFF"/>
    <path d="M12 2 3 7l9 5 9-5z" fill="#6C8EFF"/>
    <path d="M12 12v10l9-5V7z" fill="#2E52D6"/>
  </svg>
);

const Wordmark = ({ size = 22, white }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: white ? '#fff' : 'var(--text)' }}>
    <Logo size={size}/>
    <div style={{ fontSize: size * 0.86, fontWeight: 700, letterSpacing: -0.4 }}>
      Camily <span style={{ color: white ? '#A9BBFF' : 'var(--brand)' }}>AI</span>
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'rgba(255,255,255,0.78)', backdropFilter: 'blur(14px)',
      WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--line-soft)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Wordmark size={22}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          {['Product','Use Cases','How it works','Pricing','Customers'].map(l => (
            <a key={l} href="#" style={{
              color: 'var(--text-mut)', fontSize: 14, fontWeight: 500, textDecoration: 'none',
            }}>{l}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="#" style={{ color: 'var(--text)', fontSize: 14, fontWeight: 600, textDecoration: 'none' }}>Sign in</a>
          <Btn>Book a demo →</Btn>
        </div>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// Buttons
// ─────────────────────────────────────────────────────────────
function Btn({ children, kind = 'primary', size = 'md', ...rest }) {
  const sizes = {
    sm: { p: '8px 14px', fs: 13 },
    md: { p: '10px 18px', fs: 14 },
    lg: { p: '14px 24px', fs: 15 },
  }[size];
  const kinds = {
    primary: { bg: 'var(--ink)', fg: '#fff', bd: '1px solid var(--ink)' },
    brand:   { bg: 'var(--brand)', fg: '#fff', bd: '1px solid var(--brand)' },
    ghost:   { bg: 'transparent', fg: 'var(--text)', bd: '1px solid var(--line)' },
    white:   { bg: '#fff', fg: 'var(--ink)', bd: '1px solid #fff' },
  }[kind];
  return (
    <button {...rest} style={{
      padding: sizes.p, fontSize: sizes.fs, fontWeight: 600,
      background: kinds.bg, color: kinds.fg, border: kinds.bd,
      borderRadius: 999, cursor: 'pointer', letterSpacing: -0.1,
      fontFamily: 'inherit',
    }}>{children}</button>
  );
}

// ─────────────────────────────────────────────────────────────
// Section + Eyebrow
// ─────────────────────────────────────────────────────────────
function Section({ children, bg = '#fff', pad = '120px 32px', style = {} }) {
  return (
    <section style={{ background: bg, padding: pad, ...style }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>{children}</div>
    </section>
  );
}

function Eyebrow({ children, color = 'var(--brand)' }) {
  return (
    <div className="mono" style={{
      fontSize: 12, fontWeight: 500, color, textTransform: 'uppercase',
      letterSpacing: 1.4, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 99, background: color }}/>
      {children}
    </div>
  );
}

function H2({ children, style = {} }) {
  return (
    <h2 style={{
      fontSize: 56, fontWeight: 700, letterSpacing: -1.6, lineHeight: 1.04,
      margin: '0 0 24px', color: 'var(--ink)', ...style,
    }}>{children}</h2>
  );
}

function Lede({ children, style = {} }) {
  return (
    <p style={{
      fontSize: 19, lineHeight: 1.5, color: 'var(--text-mut)', maxWidth: 640, margin: 0,
      ...style,
    }}>{children}</p>
  );
}

// ─────────────────────────────────────────────────────────────
// Phone shell — wraps the screenshot PNG
// ─────────────────────────────────────────────────────────────
function PhoneFrame({ src, alt, w = 320, style = {}, badge }) {
  const h = w * (1688 / 780); // preserve ratio of source PNGs
  return (
    <div style={{
      position: 'relative', width: w, height: h,
      borderRadius: w * 0.12, padding: w * 0.018, background: '#0B1220',
      boxShadow: '0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px -20px rgba(15,21,36,0.45), 0 0 0 1px rgba(15,21,36,0.1)',
      ...style,
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: w * 0.105,
        overflow: 'hidden', background: '#F5F6F8',
      }}>
        <img src={src} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }}/>
      </div>
      {badge}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CCTV "still" tile — animated, used in hero / theft section
// ─────────────────────────────────────────────────────────────
function CCTVTile({ label, time, w = 280, h = 170, scene = 'aisle', highlight, children, style = {} }) {
  const palettes = {
    aisle:    { from: '#7B8FA7', to: '#2E3A4B', stripes: 'M0 30h300M0 60h300M0 90h300M0 120h300' },
    entrance: { from: '#6B7280', to: '#374151', stripes: 'M0 50h300M0 110h300' },
    counter:  { from: '#9EACBB', to: '#3F4B5C', stripes: 'M0 60h300M0 110h300' },
    aisle2:   { from: '#A7B6C6', to: '#556575', stripes: 'M0 30h300M0 60h300M0 90h300M0 120h300M0 150h300' },
  }[scene];
  return (
    <div style={{
      position: 'relative', width: w, height: h, borderRadius: 14, overflow: 'hidden',
      background: `linear-gradient(160deg, ${palettes.from}, ${palettes.to})`,
      ...style,
    }}>
      <svg viewBox={`0 0 300 ${h}`} preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.3 }}>
        <path d={palettes.stripes} stroke="#fff" strokeWidth="1" fill="none"/>
      </svg>
      {/* radial vignette */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.45) 100%)' }}/>
      {/* live pill */}
      <div style={{
        position: 'absolute', top: 12, left: 12, display: 'inline-flex', alignItems: 'center', gap: 6,
        background: 'rgba(11,18,32,0.65)', backdropFilter: 'blur(8px)',
        padding: '5px 10px 5px 8px', borderRadius: 999, color: '#fff',
        fontSize: 11, fontWeight: 600,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 99, background: '#EF4444', boxShadow: '0 0 0 3px rgba(239,68,68,0.25)' }}/>
        {label}
      </div>
      {/* timestamp */}
      {time && (
        <div className="mono" style={{
          position: 'absolute', bottom: 10, right: 12, color: '#fff',
          fontSize: 10.5, fontWeight: 500, opacity: 0.85, textShadow: '0 1px 2px rgba(0,0,0,0.6)',
        }}>{time}</div>
      )}
      {/* highlight box (theft) */}
      {highlight && (
        <div style={{
          position: 'absolute', ...highlight,
          border: '2px dashed #EF4444', borderRadius: 6,
          boxShadow: '0 0 0 9999px rgba(0,0,0,0.05)',
          animation: 'cctvPulse 1.6s ease-in-out infinite',
        }}/>
      )}
      {children}
      <style>{`@keyframes cctvPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }`}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MARQUEE — "trusted by" strip
// ─────────────────────────────────────────────────────────────
function Marquee() {
  const items = [
    'Sharma Kirana · Indore',
    'Fresh Daily Mart · Pune',
    'Apnaa Bazaar · Delhi NCR',
    'GreenLeaf Pharmacy · Bengaluru',
    'Style Hub · Hyderabad',
    'Daily Needs · Jaipur',
    'Metro Mini · Mumbai',
    'Suresh Stores · Chennai',
  ];
  return (
    <div style={{
      borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)',
      background: '#fff', padding: '22px 0', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', marginBottom: 14 }}>
        <div className="mono" style={{
          fontSize: 11, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 1.6,
        }}>Live in 40+ stores across India · running on existing CCTV</div>
      </div>
      <div style={{ display: 'flex', gap: 56, animation: 'mq 38s linear infinite', whiteSpace: 'nowrap' }}>
        {[...items, ...items].map((x, i) => (
          <div key={i} style={{
            fontSize: 18, fontWeight: 500, color: 'var(--text-mut)', letterSpacing: -0.2,
            display: 'flex', alignItems: 'center', gap: 56,
          }}>
            {x}
            <span style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--line)' }}/>
          </div>
        ))}
      </div>
      <style>{`@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: '#fff', padding: '80px 32px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, paddingBottom: 60, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
          <div>
            <Wordmark size={22} white/>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, marginTop: 18, maxWidth: 320 }}>
              The AI co-pilot for retail. We turn cameras into intelligence — so every store can run on data, not guesswork.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              {['X','LI','IG','YT'].map(s => (
                <div key={s} style={{
                  width: 36, height: 36, borderRadius: 99, border: '1px solid rgba(255,255,255,0.15)',
                  display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.8)',
                }}>{s}</div>
              ))}
            </div>
          </div>
          {[
            { h: 'Product', items: ['Theft alerts','Footfall analytics','Conversion','Staff insights','AI co-pilot','Mobile app'] },
            { h: 'Solutions', items: ['Kirana stores','Supermarkets','Pharmacies','Apparel','Convenience','Multi-store chains'] },
            { h: 'Company', items: ['About','Customers','Careers','Press','Contact'] },
            { h: 'Resources', items: ['Docs','Hardware guide','Privacy','Security','Status'] },
          ].map(col => (
            <div key={col.h}>
              <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 16 }}>{col.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(i => (
                  <a key={i} href="#" style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>{i}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 28 }}>
          <div className="mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
            © 2026 Camily AI · Made in India
          </div>
          <div style={{ display: 'flex', gap: 24, fontSize: 12 }}>
            <a href="#" style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>Terms</a>
            <a href="#" style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>DPA</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Logo, Wordmark, Nav, Btn, Section, Eyebrow, H2, Lede, PhoneFrame, CCTVTile, Marquee, Footer,
});