/* Websites — Grippy Code showcase. A real-feeling browser mock of a service
   site + responsive phone + capability tiles. Matches the dark/flame system. */
const Websites = () => {
  return (
    <section id="websites" className="relative py-32 overflow-hidden">
      {/* soft flame halo */}
      <span aria-hidden data-py="0.22" className="pointer-events-none absolute top-24 -left-40 w-[680px] h-[680px] rounded-full opacity-[0.16] blur-[130px] bg-flame"/>

      <div className="mx-auto max-w-[1400px] px-6 relative">
        {/* Header */}
        <div className="flex items-end justify-between flex-wrap gap-8 mb-16">
          <div className="max-w-2xl">
            <div className="font-mono text-xs tracking-[0.3em] text-flame mb-5" data-reveal>[ 03 / WEBSITES ]</div>
            <h2 className="word-rev text-[clamp(40px,6vw,96px)] leading-[0.95] tracking-[-0.03em] font-bold">
              {splitWords("A site that sells")} <span className="serif text-flame">{splitWords("while the phone rings.")}</span>
            </h2>
          </div>
          <p className="text-white/60 text-lg max-w-md" data-reveal data-reveal-delay="2">
            <b className="text-white">Grippy Code</b> hand-builds every site — fast loads, booking flows, and copy with one job for every page: get the call. Below: <b className="text-white">Under-Control</b>, a live build.
          </p>
        </div>

        {/* Showcase: desktop browser + responsive phone */}
        <div className="relative" data-reveal>
          <BrowserMock />
          <div className="hidden md:block absolute -bottom-10 right-6 lg:right-12 w-[180px] z-20" data-px="-28">
            <PhoneMock />
          </div>

          {/* floating spec tags */}
          <div className="hidden lg:flex absolute -left-3 top-10 flex-col gap-2 z-20" data-px="18">
            <SpecTag>Live client build</SpecTag>
            <SpecTag>Booking-ready</SpecTag>
            <SpecTag>Mobile-first</SpecTag>
          </div>
        </div>

        {/* Capability tiles */}
        <div className="mt-24 md:mt-20 grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            { k: 'Conversion-tuned', t: 'Every page is built around one action — the call. Tested against booked-call rates, not bounce rates.', m: 'CRO' },
            { k: 'Speed & SEO',      t: 'Lighthouse 100, Core Web Vitals green, schema baked in. You rank where your customers are searching.', m: 'PERF' },
            { k: 'Service-area pages', t: 'One page per city and ZIP you cover. Local SEO with teeth — own the map pack, not just the homepage.', m: 'LOCAL' },
            { k: 'Mobile-first',     t: '70% of trade searches are on a phone at the curb. Click-to-call, 44px taps, instant-quote flow.', m: 'UX' },
          ].map((c, i) => (
            <article key={c.k} className="group rounded-2xl border border-white/[0.08] bg-white/[0.015] p-6 lift" data-reveal data-reveal-delay={Math.min(4, i + 1)}>
              <div className="flex items-center justify-between">
                <span className="w-9 h-9 rounded-xl border border-flame/30 bg-flame/[0.06] grid place-items-center">
                  <WebIcon name={c.m} />
                </span>
                <span className="font-mono text-[9px] tracking-[0.24em] text-white/35 uppercase">{c.m}</span>
              </div>
              <h3 className="mt-5 text-white text-[17px] font-semibold tracking-tight">{c.k}</h3>
              <p className="mt-2 text-white/55 text-[13.5px] leading-relaxed">{c.t}</p>
            </article>
          ))}
        </div>

        {/* Metric strip */}
        <div className="mt-6 rounded-2xl border border-white/[0.08] overflow-hidden" data-reveal>
          <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-white/[0.07]">
            {[
              ['100', 'Lighthouse', 'performance · perfect'],
              ['0.8s', 'LCP', 'largest paint · green'],
              ['+52%', 'mobile conv.', 'vs their old site'],
              ['14 days', 'to launch', 'kickoff → live'],
            ].map(([n, l, sub]) => (
              <div key={l} className="px-6 py-7">
                <div className="font-bold text-3xl md:text-[40px] tracking-tight leading-none tabular-nums">{n}</div>
                <div className="font-mono text-[10px] tracking-[0.22em] text-flame/80 mt-3 uppercase">{l}</div>
                <div className="text-white/45 text-xs mt-1.5">{sub}</div>
              </div>
            ))}
          </div>
        </div>

        {/* CTA row */}
        <div className="mt-10 flex flex-wrap items-center gap-3" data-reveal>
          <a href="services.html#code" className="group inline-flex items-center gap-2 bg-flame hover:bg-ember text-black font-semibold px-7 py-4 rounded-full transition-colors">
            See website plans <span className="transition-transform group-hover:translate-x-1">→</span>
          </a>
          <a href="contact.html" className="inline-flex items-center gap-2 border border-line2 hover:border-white/40 text-white/85 hover:text-white px-7 py-4 rounded-full transition-colors">
            Get a site audit
          </a>
        </div>
      </div>
    </section>
  );
};

const SpecTag = ({ children }) => (
  <span className="inline-flex items-center gap-1.5 bg-black/60 backdrop-blur border border-white/10 rounded-full px-3 py-1.5 font-mono text-[9px] tracking-[0.2em] text-white/60 uppercase">
    <span className="w-1 h-1 rounded-full bg-flame"></span>{children}
  </span>
);

/* ── Desktop browser mock — Under-Control, a real Grippy Code build
      (underc.grippycode.com · clinical nutrition platform) ── */
const UC = { ink: '#1c2318', panel: '#222a1e', cream: '#e9e4d8', sand: '#d8c5a3', peach: '#e8b88a' };

const BrowserMock = () => (
  <div
    data-tilt="5" data-tilt-glow
    className="relative rounded-2xl border border-white/[0.1] overflow-hidden"
    style={{
      background: 'linear-gradient(180deg, #0e0e10, #08080a)',
      boxShadow: '0 0 0 1px rgba(255,255,255,0.04), 0 40px 100px -30px rgba(0,0,0,0.85), 0 60px 160px -50px rgba(255,87,54,0.18)',
    }}
  >
    {/* chrome */}
    <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06]">
      <span className="flex gap-1.5">
        <span className="w-2.5 h-2.5 rounded-full bg-white/12"/>
        <span className="w-2.5 h-2.5 rounded-full bg-white/12"/>
        <span className="w-2.5 h-2.5 rounded-full bg-white/12"/>
      </span>
      <div className="flex-1 flex justify-center">
        <span className="inline-flex items-center gap-2 bg-black/40 border border-white/[0.07] rounded-md px-3 py-1">
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" strokeWidth="2.4" strokeLinecap="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          <span className="font-mono text-[10px] tracking-[0.04em] text-white/55">underc.grippycode.com</span>
        </span>
      </div>
      <span className="font-mono text-[9px] tracking-[0.18em] text-emerald-400/80 uppercase flex items-center gap-1.5">
        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> live
      </span>
    </div>

    {/* rendered page — Under-Control's olive + cream system */}
    <div style={{ background: UC.ink }}>
      {/* site nav */}
      <div className="flex items-center justify-between px-6 md:px-9 py-4 border-b border-white/[0.07]">
        <div className="leading-none">
          <span className="font-bold tracking-tight text-[14px]" style={{ color: UC.cream }}>Under-Control</span>
          <span className="block font-mono text-[7.5px] tracking-[0.34em] uppercase mt-1" style={{ color: UC.sand }}>Wellness</span>
        </div>
        <nav className="hidden md:flex items-center gap-1 font-medium text-[11.5px]" style={{ color: 'rgba(233,228,216,0.65)' }}>
          {['Home', 'Dieticians', 'About', 'FAQ', 'Contact'].map((n, i) => (
            <span key={n} className={`px-3 py-1.5 rounded-full ${i === 0 ? 'font-semibold' : ''}`}
                  style={i === 0 ? { background: 'rgba(233,228,216,0.12)', color: UC.cream } : {}}>{n}</span>
          ))}
        </nav>
        <span className="inline-flex items-center gap-1.5 font-semibold text-[11.5px] px-3.5 py-2 rounded-full" style={{ background: UC.cream, color: UC.ink }}>
          Sign In →
        </span>
      </div>

      {/* hero */}
      <div className="px-6 md:px-9 py-9 md:py-12 grid md:grid-cols-[1.1fr_0.9fr] gap-8 items-center"
           style={{ background: 'radial-gradient(110% 120% at 80% 0%, rgba(216,197,163,0.10), transparent 55%)' }}>
        <div>
          <div className="font-mono text-[10px] tracking-[0.26em] uppercase" style={{ color: UC.sand }}>A clinical nutrition platform</div>
          <h3 className="mt-3 font-bold text-[clamp(26px,3.4vw,46px)] leading-[1.02] tracking-tight" style={{ color: UC.cream }}>
            Real food.<br/>Real results.<br/><span className="serif italic" style={{ color: UC.peach }}>Real change.</span>
          </h3>
          <p className="mt-4 text-[13.5px] leading-relaxed max-w-[44ch]" style={{ color: 'rgba(233,228,216,0.6)' }}>
            Discover a personalized approach to nutrition that supports your lifestyle and health goals.
          </p>
          <div className="mt-6 flex flex-wrap items-center gap-2.5">
            <span className="inline-flex items-center gap-1.5 font-semibold text-[12.5px] px-4 py-2.5 rounded-full" style={{ background: UC.cream, color: UC.ink }}>Book Your Consultation</span>
            <span className="inline-flex items-center gap-1.5 border text-[12.5px] px-4 py-2.5 rounded-full" style={{ borderColor: 'rgba(233,228,216,0.3)', color: 'rgba(233,228,216,0.85)' }}>Explore Nutrition Plans</span>
          </div>
          <div className="mt-5 flex items-center gap-2.5">
            <span className="text-[13px] tracking-[0.1em]" style={{ color: UC.peach }}>★★★★★</span>
            <span className="font-mono text-[10.5px] tracking-[0.08em]" style={{ color: 'rgba(233,228,216,0.6)' }}>4,600+ happy clients · 4.9 rated</span>
          </div>
        </div>

        {/* hero visual block — produce still-life in the site's palette */}
        <div className="relative rounded-xl border overflow-hidden aspect-[4/3] hidden md:block"
             style={{ borderColor: 'rgba(233,228,216,0.12)', background: 'radial-gradient(120% 90% at 70% 20%, #38422f, #1a2016 70%)' }}>
          <svg viewBox="0 0 200 150" className="absolute inset-0 w-full h-full opacity-95">
            <defs>
              <radialGradient id="uc-orange" cx="0.35" cy="0.3" r="0.9">
                <stop offset="0%" stopColor="#e8b88a"/><stop offset="100%" stopColor="#b97a45"/>
              </radialGradient>
              <radialGradient id="uc-green" cx="0.35" cy="0.3" r="0.9">
                <stop offset="0%" stopColor="#9db173"/><stop offset="100%" stopColor="#5c7042"/>
              </radialGradient>
              <radialGradient id="uc-berry" cx="0.35" cy="0.3" r="0.9">
                <stop offset="0%" stopColor="#c98a96"/><stop offset="100%" stopColor="#8a4a5c"/>
              </radialGradient>
            </defs>
            {/* table line */}
            <line x1="0" y1="118" x2="200" y2="118" stroke="rgba(233,228,216,0.18)" strokeWidth="1"/>
            {/* citrus */}
            <circle cx="70" cy="92" r="26" fill="url(#uc-orange)"/>
            <path d="M70 66 q4 -8 12 -9" fill="none" stroke="#5c7042" strokeWidth="3" strokeLinecap="round"/>
            {/* apple */}
            <circle cx="122" cy="98" r="20" fill="url(#uc-green)"/>
            {/* berries */}
            <circle cx="156" cy="106" r="11" fill="url(#uc-berry)"/>
            <circle cx="172" cy="98" r="8" fill="url(#uc-berry)"/>
            {/* leaf accents */}
            <path d="M118 76 q10 -10 22 -6 q-6 12 -22 6z" fill="#7b8f57"/>
          </svg>
          <span className="absolute bottom-3 left-3 inline-flex items-center gap-1.5 backdrop-blur border rounded-full px-2.5 py-1 font-mono text-[8.5px] tracking-[0.16em] uppercase"
                style={{ background: 'rgba(28,35,24,0.65)', borderColor: 'rgba(233,228,216,0.18)', color: 'rgba(233,228,216,0.75)' }}>
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse-dot"></span> Est. 2026 — accepting consultations
          </span>
        </div>
      </div>

      {/* service chips row */}
      <div className="px-6 md:px-9 pb-8 grid grid-cols-2 md:grid-cols-4 gap-2.5">
        {[['1:1 Consultations', 'with registered dieticians'], ['Personal meal plans', '48h turnaround'], ['Ongoing coaching', 'weekly check-ins'], ['For Pros', 'grow your client list']].map(([t, p]) => (
          <div key={t} className="rounded-lg border px-3.5 py-3" style={{ borderColor: 'rgba(233,228,216,0.1)', background: 'rgba(233,228,216,0.04)' }}>
            <div className="text-[12.5px] font-semibold tracking-tight" style={{ color: UC.cream }}>{t}</div>
            <div className="font-mono text-[10px] tracking-[0.08em] mt-1" style={{ color: UC.sand }}>{p}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* ── Phone mock — Under-Control, responsive proof ── */
const PhoneMock = () => (
  <div className="relative bg-[#0a0a0a] border border-line2 rounded-[26px] p-2 shadow-[0_30px_60px_rgba(0,0,0,0.6)]">
    <div className="rounded-[20px] overflow-hidden" style={{ background: UC.ink }}>
      {/* status bar */}
      <div className="flex items-center justify-between px-3 pt-2 pb-1 font-mono text-[7px]" style={{ color: 'rgba(233,228,216,0.55)' }}>
        <span>9:41</span><span>● ● ●</span>
      </div>
      {/* nav */}
      <div className="flex items-center justify-between px-3 py-2 border-b" style={{ borderColor: 'rgba(233,228,216,0.08)' }}>
        <div className="leading-none">
          <span className="font-bold text-[8px] tracking-tight" style={{ color: UC.cream }}>Under-Control</span>
          <span className="block font-mono text-[4.5px] tracking-[0.3em] uppercase mt-[2px]" style={{ color: UC.sand }}>Wellness</span>
        </div>
        <span className="text-[10px]" style={{ color: 'rgba(233,228,216,0.45)' }}>☰</span>
      </div>
      {/* hero */}
      <div className="px-3 py-3">
        <div className="font-mono text-[6px] tracking-[0.2em] uppercase" style={{ color: UC.sand }}>Clinical nutrition</div>
        <div className="mt-1 font-bold text-[13px] leading-[1.05] tracking-tight" style={{ color: UC.cream }}>Real food. Real results. <span className="serif italic" style={{ color: UC.peach }}>Real change.</span></div>
        <div className="mt-2.5 font-semibold text-[8.5px] text-center py-2 rounded-full" style={{ background: UC.cream, color: UC.ink }}>Book Your Consultation</div>
        <div className="mt-1.5 border text-[8.5px] text-center py-2 rounded-full" style={{ borderColor: 'rgba(233,228,216,0.25)', color: 'rgba(233,228,216,0.8)' }}>Explore Nutrition Plans</div>
        <div className="mt-2.5 flex items-center justify-center gap-1.5">
          <span className="text-[8px]" style={{ color: UC.peach }}>★★★★★</span>
          <span className="font-mono text-[6.5px]" style={{ color: 'rgba(233,228,216,0.55)' }}>4,600+ happy clients</span>
        </div>
      </div>
    </div>
  </div>
);

const WebIcon = ({ name }) => {
  const s = '#FF8961';
  if (name === 'CRO') return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={s} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 7-7"/><path d="M14 7h6v6"/></svg>
  );
  if (name === 'PERF') return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={s} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>
  );
  if (name === 'LOCAL') return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={s} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
  );
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={s} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="7" y="2" width="10" height="20" rx="2.5"/><line x1="11" y1="18" x2="13" y2="18"/></svg>
  );
};

window.Websites = Websites;