---
import Icon from './Icon.astro';

/**
 * One feature showcase section: marketing copy on one side, a pixel-faithful
 * product window (mock) floating on the other. Each mock is authored at a fixed
 * DESIGN width (1080px) and uniformly scaled to fit its column by a tiny
 * ResizeObserver, so it looks identical on every device (just smaller) with no
 * reflow, no overlap, and the demo cursor always lands on the right control.
 */
interface Callout { label: string; text: string }
interface Props {
  eyebrow: string;
  title: string;
  description: string;
  callouts?: Callout[];
  cta?: { text: string; href: string };
  side?: 'left' | 'right';
  bg?: 'sky' | 'light' | 'navy' | 'wallpaper';
  url: string;
  cursor?: 'a' | 'b' | 'c' | 'd';
  id?: string;
}
const {
  eyebrow, title, description, callouts = [], cta,
  side = 'right', bg = 'sky', url, id,
} = Astro.props;

const lightText = bg !== 'light';

const bgStyle: Record<string, string> = {
  sky: 'background: radial-gradient(ellipse 130% 120% at 50% -10%, #38bdf8 0%, #0ea5e9 34%, #0284c7 68%, #0369a1 100%);',
  light: 'background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);',
  navy: 'background: radial-gradient(ellipse 110% 90% at 50% -10%, #143a63 0%, #0e2545 38%, #0a1730 68%, #070d1c 100%);',
  wallpaper: 'background: radial-gradient(78% 95% at 15% 6%, #38bdf8 0%, #1d4ed8 42%, rgba(29,78,216,0) 72%), linear-gradient(120deg, #1e40af 0%, #1d4ed8 48%, #172554 100%);',
};

const ringClass = bg === 'light' ? 'ring-slate-200/80' : 'ring-white/60';
const frameShadow =
  bg === 'navy'
    ? 'box-shadow: 0 50px 100px -30px rgba(2,132,199,0.55), 0 8px 24px -12px rgba(0,0,0,0.4);'
    : 'box-shadow: 0 44px 90px -32px rgba(2,132,199,0.45);';

const eyebrowColor = lightText ? 'text-white/60' : 'text-sky-600';
const titleColor = lightText ? 'text-white' : 'text-slate-900';
const bodyColor = lightText ? 'text-white/75' : 'text-slate-600';
const calloutLabel = lightText ? 'text-white' : 'text-slate-900';
const calloutText = lightText ? 'text-white/65' : 'text-slate-500';

const slash = url.indexOf('/');
const urlDomain = slash === -1 ? url : url.slice(0, slash);
const urlPath = slash === -1 ? '' : url.slice(slash);

const copyOrder = side === 'left' ? 'lg:order-2' : 'lg:order-1';
const mockOrder = side === 'left' ? 'lg:order-1' : 'lg:order-2';
---
<section id={id} class="relative isolate overflow-hidden" style={bgStyle[bg]}>
  {bg === 'sky' && (
    <>
      <div class="absolute inset-0 pointer-events-none" style="opacity:0.5; background: radial-gradient(ellipse 120% 100% at 50% -10%, rgba(224,242,254,0.7) 0%, rgba(125,211,252,0.28) 30%, transparent 62%);"></div>
      <img src="/backdrops/cloud-4.webp" alt="" aria-hidden="true" class="absolute -top-12 -left-16 w-[480px] opacity-[0.22] pointer-events-none select-none cloud-drift cloud-1" loading="lazy" decoding="async" style="mix-blend-mode: screen;" />
    </>
  )}
  {bg === 'wallpaper' && (
    <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(55% 55% at 16% 12%, rgba(255,255,255,0.22) 0%, transparent 60%), radial-gradient(50% 60% at 88% 92%, rgba(99,102,241,0.4) 0%, transparent 65%);"></div>
  )}
  {bg === 'navy' && (
    <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(60% 50% at 78% 8%, rgba(56,189,248,0.16) 0%, transparent 60%);"></div>
  )}

  <div class="container-wide relative py-16 md:py-24">
    <div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
      <!-- COPY -->
      <div class={`lg:col-span-5 ${copyOrder}`}>
        <div class={`text-[11px] uppercase tracking-[0.18em] font-mono mb-3 ${eyebrowColor}`}>{eyebrow}</div>
        <h2 class={`text-[28px] md:text-[40px] font-semibold tracking-[-0.025em] leading-[1.07] ${titleColor}`}>{title}</h2>
        <p class={`mt-5 text-[15.5px] leading-relaxed max-w-xl ${bodyColor}`}>{description}</p>

        {callouts.length > 0 && (
          <div class="mt-7 space-y-4 max-w-md">
            {callouts.map((c) => (
              <div class="flex gap-3">
                <span class={`mt-[7px] h-1.5 w-1.5 rounded-full shrink-0 ${lightText ? 'bg-sky-300' : 'bg-sky-500'}`}></span>
                <div>
                  <div class={`text-[13px] font-semibold ${calloutLabel}`}>{c.label}</div>
                  <div class={`text-[13px] leading-relaxed mt-0.5 ${calloutText}`}>{c.text}</div>
                </div>
              </div>
            ))}
          </div>
        )}

        {cta && (
          <a href={cta.href}
             class={`mt-8 inline-flex items-center gap-1.5 text-[13.5px] font-medium pb-px border-b ${lightText ? 'text-white border-white/30 hover:border-white' : 'text-slate-900 border-slate-900/30 hover:border-slate-900'}`}>
            {cta.text}
            <Icon name="arrowUpRight" size={13} />
          </a>
        )}
      </div>

      <!-- PRODUCT WINDOW -->
      <div class={`lg:col-span-7 ${mockOrder} min-w-0`}>
        <div class={`feature-window showcase-frame relative rounded-[14px] overflow-hidden bg-white ring-1 ${ringClass}`} style={frameShadow}>
          <!-- browser chrome -->
          <div class="flex items-center gap-2.5 px-3 h-11 border-b border-slate-200/80 bg-gradient-to-b from-[#f7f8fa] to-[#eceef1]">
            <div class="flex items-center gap-2 shrink-0">
              <span class="w-3 h-3 rounded-full bg-[#ff5f57]"></span>
              <span class="w-3 h-3 rounded-full bg-[#febc2e]"></span>
              <span class="w-3 h-3 rounded-full bg-[#28c840]"></span>
            </div>
            <div class="hidden sm:flex items-center gap-1 shrink-0 text-slate-400">
              <span class="grid place-items-center w-6 h-6 rounded-md hover:bg-slate-200/60">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
              </span>
              <span class="grid place-items-center w-6 h-6 rounded-md text-slate-300">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
              </span>
            </div>
            <div class="flex-1 min-w-0 flex items-center gap-2 h-7 px-3 rounded-lg bg-white ring-1 ring-slate-200/90 text-[12px] shadow-[inset_0_1px_2px_rgba(15,23,42,0.04)]">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" class="text-emerald-500 shrink-0"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              <span class="truncate font-medium text-slate-700">{urlDomain}<span class="text-slate-400 font-normal">{urlPath}</span></span>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-auto shrink-0 text-slate-300"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg>
            </div>
            <div class="hidden sm:flex items-center gap-2.5 shrink-0 text-slate-300">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
            </div>
          </div>

          <!-- scale-to-fit screen: authored at 1080px, scaled to the column on every device -->
          <div class="feat-fit relative w-full overflow-hidden bg-white min-h-[240px]">
            <div class="feat-screen absolute top-0 left-0 origin-top-left" style="width:900px;">
              <slot />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  // Uniformly scale every fixed-width mock screen to fit its column. Runs on
  // load + resize so the showcase is correct on every device width.
  const DESIGN = 900;
  function fit(screen: HTMLElement) {
    const box = screen.parentElement as HTMLElement | null;
    if (!box) return;
    const s = box.clientWidth / DESIGN;
    screen.style.transform = `scale(${s})`;
    box.style.height = `${screen.offsetHeight * s}px`;
  }
  function init() {
    document.querySelectorAll<HTMLElement>('.feat-screen').forEach((screen) => {
      const run = () => fit(screen);
      run();
      requestAnimationFrame(run);
      if (screen.parentElement) new ResizeObserver(run).observe(screen.parentElement);
    });
    window.addEventListener('load', () =>
      document.querySelectorAll<HTMLElement>('.feat-screen').forEach((s) => fit(s)),
    );
  }
  init();
</script>
