// CSS/SVG mockups — no external images
const { Star: StarIcon } = window;

// Small star-rating row
function StarRow({ size = 14, label }) {
  return (
    <div className="flex items-center gap-1.5">
      <div className="flex text-amber-400">
        {[0, 1, 2, 3, 4].map((i) => (
          <StarIcon key={i} size={size} className="fill-amber-400" strokeWidth={0} />
        ))}
      </div>
      {label && <span className="text-[11px] font-semibold text-slate-600">{label}</span>}
    </div>
  );
}

// Subtle striped placeholder block (for "photo")
function PhotoBlock({ className = '', label }) {
  return (
    <div
      className={`relative overflow-hidden ${className}`}
      style={{
        background:
          'repeating-linear-gradient(135deg, #1f6feb12 0px, #1f6feb12 10px, #1f6feb05 10px, #1f6feb05 20px), #eef4fe',
      }}
    >
      {label && (
        <span className="absolute inset-0 flex items-center justify-center font-mono text-[9px] uppercase tracking-widest text-brand/50">
          {label}
        </span>
      )}
    </div>
  );
}

// The little pressure-washing site rendered inside frames (compact)
function SampleSiteMini({ scale = 'sm' }) {
  return (
    <div className="flex h-full flex-col bg-white text-left">
      {/* site header */}
      <div className="flex items-center justify-between border-b border-slate-100 px-3 py-2">
        <span className="text-[10px] font-extrabold leading-tight text-slate-900">
          Alexandria's Top<br />Pressure Washing
        </span>
        <span className="rounded bg-brand px-2 py-1 text-[8px] font-bold text-white">Call</span>
      </div>
      {/* hero photo */}
      <PhotoBlock className="h-16 w-full" label="home exterior" />
      {/* hero copy */}
      <div className="px-3 py-2.5">
        <StarRow size={9} label="4.8" />
        <p className="mt-1.5 text-[11px] font-extrabold leading-tight text-slate-900">
          Driveways &amp; siding, like&nbsp;new
        </p>
        <div className="mt-2 rounded-md bg-brand px-2 py-1.5 text-center text-[9px] font-bold text-white">
          Get a Free Quote
        </div>
      </div>
      {/* services list */}
      <div className="mt-auto border-t border-slate-100 px-3 py-2">
        <p className="text-[7px] font-bold uppercase tracking-wider text-slate-400">Services</p>
        <div className="mt-1 space-y-1">
          {['Driveway washing', 'House soft-wash', 'Deck & patio'].map((s) => (
            <div key={s} className="flex items-center gap-1">
              <span className="h-1 w-1 rounded-full bg-brand" />
              <span className="text-[8px] text-slate-600">{s}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Browser chrome frame wrapping children
function BrowserFrame({ children, url = 'alexandriapressurewash.com', className = '' }) {
  return (
    <div className={`overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xl shadow-slate-300/40 ${className}`}>
      <div className="flex items-center gap-2 border-b border-slate-100 bg-slate-50 px-3 py-2">
        <div className="flex gap-1.5">
          <span className="h-2.5 w-2.5 rounded-full bg-slate-300" />
          <span className="h-2.5 w-2.5 rounded-full bg-slate-300" />
          <span className="h-2.5 w-2.5 rounded-full bg-slate-300" />
        </div>
        <div className="ml-1 flex flex-1 items-center gap-1.5 rounded-md bg-white px-2 py-1 text-[10px] text-slate-400 ring-1 ring-slate-200">
          <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
          {url}
        </div>
      </div>
      {children}
    </div>
  );
}

// Phone frame wrapping children
function PhoneFrame({ children, className = '' }) {
  return (
    <div className={`rounded-[1.6rem] border-[5px] border-slate-900 bg-slate-900 p-0.5 shadow-xl shadow-slate-400/40 ${className}`}>
      <div className="relative overflow-hidden rounded-[1.25rem] bg-white">
        <div className="absolute left-1/2 top-1 z-10 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-900" />
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { StarRow, PhotoBlock, SampleSiteMini, BrowserFrame, PhoneFrame });