/* Phone — sticky transcript demo, no zoom this time */
const Phone = () => {
  const lines = [
    { who: 'caller', t: "Hi — I saw the nutrition plans online. Can I talk to someone about getting started?" },
    { who: 'ai', t: "Of course! This is Sarah at Under-Control. Are you after a one-on-one consultation, or one of the coaching plans?" },
    { who: 'caller', t: "A consultation first, I think. Do you have any evening slots?" },
    { who: 'ai', t: "We do — Dr. Lina has Thursday at 6:30 PM open. Want me to hold it for you?" },
    { who: 'caller', t: "Yes please. How much is the consultation?" },
    { who: 'ai', t: "It's $75, and it's credited toward any plan you join afterward. I'll email your confirmation right now." },
    { who: 'caller', t: "Perfect, thank you." },
    { who: 'ai', t: "You're booked for Thursday, 6:30 PM. Talk soon!" },
  ];

  return (
    <section className="relative py-32 overflow-hidden">
      <div className="mx-auto max-w-[1400px] px-6">
        <div className="mb-16 max-w-3xl">
          <div className="font-mono text-xs tracking-[0.3em] text-flame mb-5" data-reveal>[ 04 / LIVE CALL ]</div>
          <h2 className="word-rev text-[clamp(40px,6vw,96px)] leading-[0.95] tracking-[-0.03em] font-bold">
            {splitWords("Hear it answer a")} <span className="serif text-flame">{splitWords("real one.")}</span>
          </h2>
        </div>

        <div className="grid md:grid-cols-12 gap-8 items-center">
          {/* Phone */}
          <div className="md:col-span-5">
            <PhoneDevice />
          </div>

          {/* Transcript */}
          <div className="md:col-span-7">
            <div className="font-mono text-[10px] tracking-[0.3em] text-white/40 mb-4">TRANSCRIPT · CALL #GRP-44102</div>
            <div className="space-y-3">
              {lines.map((l, i) => (
                <div
                  key={i}
                  data-reveal
                  data-reveal-delay={Math.min(4, Math.floor(i/2)+1)}
                  className={`max-w-[80%] ${l.who === 'caller' ? 'mr-auto' : 'ml-auto'}`}
                >
                  <div className={`text-[10px] font-mono tracking-wider mb-1 ${l.who === 'caller' ? 'text-white/40' : 'text-flame/70'}`}>
                    {l.who === 'caller' ? 'CALLER' : 'GRIPPY · SARAH'}
                  </div>
                  <div className={`rounded-2xl px-5 py-3.5 ${l.who === 'caller' ? 'bg-panel border border-line2 text-white/90' : 'bg-flame text-black font-medium'}`}>
                    {l.t}
                  </div>
                </div>
              ))}
            </div>
            <div className="mt-8 grid grid-cols-3 gap-3 text-center">
              {[['00:52','DURATION'],['$75','QUOTED'],['BOOKED','OUTCOME']].map(([v,l]) => (
                <div key={l} className="bg-panel border border-line2 rounded-xl py-3">
                  <div className="font-bold text-lg">{v}</div>
                  <div className="font-mono text-[9px] text-white/40 tracking-[0.2em]">{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Phone = Phone;

/* ── Premium phone device — branded in-call screen, proper SVG controls ── */
const PhoneDevice = () => {
  const [secs, setSecs] = React.useState(48);
  React.useEffect(() => {
    const id = setInterval(() => setSecs(s => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const mmss = `${String(Math.floor(secs / 60)).padStart(2, '0')}:${String(secs % 60).padStart(2, '0')}`;

  // B148: data-tilt-glow removed — the sheen overlay inherits border-radius 0 from
  // this square wrapper, which painted two visible box edges over the phone.
  return (
    <div className="relative mx-auto" style={{ maxWidth: 308 }} data-tilt="7">
      <div className="absolute -inset-14 phone-glow"></div>

      {/* Titanium-style rail + bezel */}
      <div
        className="relative rounded-[46px] p-[3px]"
        style={{
          background: 'linear-gradient(150deg, #3a3a3e 0%, #161618 28%, #0c0c0e 55%, #2a2a2e 100%)',
          boxShadow: '0 50px 90px -25px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04), 0 60px 140px -50px rgba(255,87,54,0.28)',
        }}
      >
        <div className="relative rounded-[43px] overflow-hidden aspect-[9/19.5]"
             style={{ background: 'radial-gradient(120% 80% at 50% 0%, #1a0f0c 0%, #0a0a0b 46%, #060607 100%)' }}>

          {/* Dynamic island */}
          <div className="absolute top-2.5 left-1/2 -translate-x-1/2 z-30 w-[86px] h-[26px] rounded-full bg-black flex items-center justify-between px-2.5"
               style={{ boxShadow: '0 0 0 1px rgba(255,255,255,0.04)' }}>
            <span className="w-1.5 h-1.5 rounded-full bg-[#1f1f22]"></span>
            <span className="w-2 h-2 rounded-full bg-[#15110f] ring-1 ring-flame/30"></span>
          </div>

          {/* Status bar */}
          <div className="relative z-20 flex items-center justify-between px-6 pt-3.5 font-mono text-[10px] text-white/80 tabular-nums">
            <span>9:41</span>
            <span className="flex items-center gap-1.5">
              <svg width="15" height="9" viewBox="0 0 18 12" fill="none"><rect x="0" y="7" width="3" height="5" rx="1" fill="currentColor"/><rect x="5" y="4.5" width="3" height="7.5" rx="1" fill="currentColor"/><rect x="10" y="2" width="3" height="10" rx="1" fill="currentColor"/><rect x="15" y="0" width="3" height="12" rx="1" fill="currentColor" opacity="0.4"/></svg>
              <svg width="14" height="10" viewBox="0 0 16 12" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M1 4.2a10 10 0 0 1 14 0M3.5 7a6.5 6.5 0 0 1 9 0M8 9.6h.01" strokeLinecap="round"/></svg>
              <span className="inline-flex items-center"><span className="w-5 h-2.5 rounded-[3px] border border-white/55 relative"><span className="absolute inset-[1.5px] right-[40%] rounded-[1px] bg-white/80"></span></span><span className="w-[1.5px] h-1 bg-white/55 rounded-r ml-[1px]"></span></span>
            </span>
          </div>

          {/* Call meta */}
          <div className="relative z-20 px-6 mt-8 text-center">
            <div className="inline-flex items-center gap-1.5 font-mono text-[9px] tracking-[0.26em] text-emerald-400/90 uppercase">
              <span className="relative flex w-1.5 h-1.5"><span className="absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-60"></span><span className="relative w-1.5 h-1.5 rounded-full bg-emerald-400"></span></span>
              Answered · auto
            </div>
            <div className="mt-3 text-white font-semibold text-[20px] tracking-tight leading-none">Grippy · Sarah</div>
            <div className="mt-2 font-mono text-[10px] tracking-[0.2em] text-white/45 uppercase">Under-Control · wellness</div>
            <div className="mt-1.5 font-mono text-[13px] text-flame tabular-nums tracking-[0.08em]">{mmss}</div>
          </div>

          {/* Avatar with concentric pulse */}
          <div className="relative z-20 mt-6 grid place-items-center">
            <div className="relative w-[108px] h-[108px] grid place-items-center">
              <span className="absolute inset-0 rounded-full border border-flame/25" style={{ animation: 'sonar-expand 3.2s ease-out infinite' }}></span>
              <span className="absolute inset-0 rounded-full border border-flame/20" style={{ animation: 'sonar-expand 3.2s ease-out infinite', animationDelay: '1.1s' }}></span>
              <div className="relative w-[88px] h-[88px] rounded-full overflow-hidden ring-1 ring-white/15"
                   style={{ background: 'radial-gradient(60% 60% at 40% 30%, #FF7050, #D9421C 75%)', boxShadow: '0 12px 30px -8px rgba(255,87,54,0.6)' }}>
                <GrippyMark size={88} radius={999} />
              </div>
            </div>
          </div>

          {/* Live waveform */}
          <div className="relative z-20 mt-6 px-8 flex items-center justify-center gap-[3px] h-9">
            {Array.from({ length: 17 }).map((_, i) => (
              <span key={i} className="w-[3px] rounded-full bg-flame/85"
                    style={{ height: `${30 + Math.abs(Math.sin(i * 0.9)) * 60}%`, animation: `wave 1s ease-in-out ${i * 0.06}s infinite alternate` }}></span>
            ))}
          </div>
          <style>{`@keyframes wave { from { transform: scaleY(0.35); } to { transform: scaleY(1.35); } }`}</style>

          {/* Control grid */}
          <div className="absolute bottom-9 inset-x-0 z-20 px-9">
            <div className="grid grid-cols-3 gap-y-5 place-items-center">
              <PhoneCtl label="mute" icon="mute" />
              <PhoneCtl label="keypad" icon="keypad" />
              <PhoneCtl label="speaker" icon="speaker" active />
              <PhoneCtl label="record" icon="record" />
              <PhoneCtl label="transfer" icon="transfer" />
              <PhoneCtl label="add" icon="add" />
            </div>
            <div className="mt-6 flex justify-center">
              <button className="w-[58px] h-[58px] rounded-full bg-flame grid place-items-center shadow-[0_10px_24px_-6px_rgba(255,87,54,0.7)] hover:bg-ember transition-colors" aria-label="End call">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="#0a0a0a"><path d="M21 15.5c-1.2 0-2.4-.2-3.5-.6a1 1 0 0 0-1 .2l-1.6 1.6a14.5 14.5 0 0 1-6.6-6.6l1.6-1.6a1 1 0 0 0 .2-1C9.2 6.4 9 5.2 9 4a1 1 0 0 0-1-1H4.5a1 1 0 0 0-1 1A17.5 17.5 0 0 0 21 21.5a1 1 0 0 0 1-1V16.5a1 1 0 0 0-1-1z" transform="rotate(135 12 12)"/></svg>
              </button>
            </div>
          </div>

          {/* home indicator */}
          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-28 h-1 rounded-full bg-white/25"></div>
        </div>
      </div>
    </div>
  );
};

const PhoneCtl = ({ label, icon, active }) => (
  <div className="flex flex-col items-center gap-1.5">
    <span className={`w-12 h-12 rounded-full grid place-items-center transition-colors ${active ? 'bg-white text-black' : 'bg-white/[0.08] text-white/85 border border-white/10'}`}>
      <PhoneCtlIcon name={icon} />
    </span>
    <span className="font-mono text-[8px] tracking-[0.14em] text-white/45 uppercase">{label}</span>
  </div>
);

const PhoneCtlIcon = ({ name }) => {
  const p = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'mute') return <svg {...p}><path d="M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z"/><path d="M19 10v1a7 7 0 0 1-14 0v-1M12 18v4"/></svg>;
  if (name === 'keypad') return <svg {...p} strokeWidth="2.2"><circle cx="6" cy="6" r="0.5"/><circle cx="12" cy="6" r="0.5"/><circle cx="18" cy="6" r="0.5"/><circle cx="6" cy="12" r="0.5"/><circle cx="12" cy="12" r="0.5"/><circle cx="18" cy="12" r="0.5"/><circle cx="6" cy="18" r="0.5"/><circle cx="12" cy="18" r="0.5"/><circle cx="18" cy="18" r="0.5"/></svg>;
  if (name === 'speaker') return <svg {...p}><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M19 6a9 9 0 0 1 0 12"/></svg>;
  if (name === 'record') return <svg {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5" fill="currentColor"/></svg>;
  if (name === 'transfer') return <svg {...p}><path d="M16 3h5v5"/><path d="M4 20L21 3"/><path d="M21 16v5h-5"/><path d="M15 15l6 6"/><path d="M4 4l5 5"/></svg>;
  return <svg {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
};

window.PhoneDevice = PhoneDevice;