/* global React */
const { useState: useStateP, useEffect: useEffectP } = React;

/* =========================================================
   Product preview — 3-slide horizontal slider
   Keeps stylised mockups of the figma screens; drag / arrow / dot nav
   ========================================================= */
function Product() {
  const slides = [
    {
      id: 'builder',
      num: '01',
      label: 'Visual builder',
      sub: 'Drag, drop, done.',
      desc: 'Edit any section, image, or button right on the canvas. See your site as your visitors will, while you build it.',
      render: () => <MockBuilder />,
    },
    {
      id: 'brand',
      num: '02',
      label: 'Brand kit',
      sub: 'Fonts, colors, buttons.',
      desc: 'Set your brand once. Every page, button and section stays consistent. Change your accent color, the whole site updates.',
      render: () => <MockBrand />,
    },
    {
      id: 'templates',
      num: '03',
      label: 'Templates & pages',
      sub: '80+ ready to launch.',
      desc: 'Start from a template built for your industry. Add, reorder and SEO-optimise pages without touching code.',
      render: () => <MockTemplates />,
    },
  ];

  const [idx, setIdx] = useStateP(0);
  const trackRef = React.useRef(null);
  const [drag, setDrag] = useStateP({ active: false, startX: 0, dx: 0 });

  const go = (i) => setIdx(Math.max(0, Math.min(slides.length - 1, i)));
  const next = () => go((idx + 1) % slides.length);
  const prev = () => go((idx - 1 + slides.length) % slides.length);

  // Keyboard nav when slider is focused / hovered
  useEffectP(() => {
    const onKey = (e) => {
      if (!trackRef.current) return;
      const r = trackRef.current.getBoundingClientRect();
      const inView = r.top < window.innerHeight * 0.8 && r.bottom > window.innerHeight * 0.2;
      if (!inView) return;
      if (e.key === 'ArrowRight') next();
      if (e.key === 'ArrowLeft') prev();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  // Drag handlers
  const onDown = (e) => {
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    setDrag({ active: true, startX: x, dx: 0 });
  };
  const onMove = (e) => {
    if (!drag.active) return;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    setDrag(d => ({ ...d, dx: x - d.startX }));
  };
  const onUp = () => {
    if (!drag.active) return;
    const threshold = 60;
    if (drag.dx < -threshold) next();
    else if (drag.dx > threshold) prev();
    setDrag({ active: false, startX: 0, dx: 0 });
  };

  const active = slides[idx];

  return (
    <section id="product" className="section-pad" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="product-header reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Product · Preview</div>
            <h2 className="display display-lg" style={{ margin: '0 0 24px', maxWidth: '14ch' }}>
              Everything you need.<br/>
              Nothing you don't.
            </h2>
          </div>
          <p className="lede" style={{ alignSelf: 'end' }}>
            Ree is a complete website platform — builder, hosting, domain, analytics, and a brand kit
            that keeps your site consistent. Built by designers, for people who don't have time to design.
          </p>
        </div>

        {/* Slide meta bar */}
        <div className="slider-meta reveal">
          <div className="sm-left">
            <div className="sm-num mono">{active.num} / 0{slides.length}</div>
            <div>
              <div className="sm-label">{active.label}</div>
              <div className="sm-sub">{active.sub}</div>
            </div>
          </div>
          <div className="sm-desc">{active.desc}</div>
          <div className="sm-ctrls">
            <button className="sm-btn" onClick={prev} aria-label="Previous slide">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <button className="sm-btn" onClick={next} aria-label="Next slide">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </div>
        </div>

        {/* Slider stage */}
        <div
          className="product-slider reveal"
          ref={trackRef}
          onMouseDown={onDown}
          onMouseMove={onMove}
          onMouseUp={onUp}
          onMouseLeave={onUp}
          onTouchStart={onDown}
          onTouchMove={onMove}
          onTouchEnd={onUp}
        >
          <div
            className="slider-track"
            style={{
              transform: `translate3d(calc(${-idx * 100}% + ${drag.active ? drag.dx : 0}px), 0, 0)`,
              transition: drag.active ? 'none' : 'transform 0.6s var(--ease-out)',
            }}
          >
            {slides.map((s, i) => (
              <div key={s.id} className={`slider-slide ${i === idx ? 'on' : ''}`} aria-hidden={i !== idx}>
                <div className="product-stage">
                  <BrowserChrome />
                  <div className="product-stage-inner">
                    {s.render()}
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Edge arrows overlay on the stage */}
          <button className="slider-edge prev" onClick={prev} aria-label="Previous" disabled={idx === 0}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button className="slider-edge next" onClick={next} aria-label="Next" disabled={idx === slides.length - 1}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>

        {/* Dots / progress */}
        <div className="slider-dots reveal" role="tablist" aria-label="Product slides">
          {slides.map((s, i) => (
            <button
              key={s.id}
              role="tab"
              aria-selected={i === idx}
              className={`sd ${i === idx ? 'on' : ''}`}
              onClick={() => go(i)}
            >
              <span className="sd-label mono">0{i + 1}</span>
              <span className="sd-bar"><span className="sd-fill" /></span>
              <span className="sd-name">{s.label}</span>
            </button>
          ))}
        </div>
      </div>

      <style>{`
        .product-header {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(40px, 6vw, 80px);
          margin-bottom: clamp(40px, 6vw, 60px);
        }
        @media (max-width: 860px) { .product-header { grid-template-columns: 1fr; } }

        /* Slide meta bar above the stage */
        .slider-meta {
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: clamp(24px, 4vw, 48px);
          padding: 20px 4px;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          margin-bottom: 20px;
        }
        .sm-left { display: inline-flex; align-items: center; gap: 20px; }
        .sm-num {
          font-size: 11px; letter-spacing: 0.14em; color: var(--lime);
          padding: 6px 10px; border: 1px solid var(--lime); border-radius: 999px;
        }
        .sm-label { font-size: 16px; font-weight: 600; color: var(--ink-0); }
        .sm-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
        .sm-desc {
          color: var(--ink-2);
          font-size: 14px;
          line-height: 1.55;
          max-width: 60ch;
        }
        .sm-ctrls { display: inline-flex; gap: 8px; }
        .sm-btn {
          width: 40px; height: 40px; border-radius: 50%;
          background: var(--bg-2);
          border: 1px solid var(--line);
          color: var(--ink-1);
          display: inline-flex; align-items: center; justify-content: center;
          transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
        }
        .sm-btn:hover { background: var(--lime); color: #0a0a0a; border-color: var(--lime); transform: translateY(-1px); }
        @media (max-width: 860px) {
          .slider-meta { grid-template-columns: 1fr; gap: 16px; }
          .sm-desc { order: 3; }
          .sm-ctrls { order: 2; justify-self: end; }
        }

        /* Slider stage */
        .product-slider {
          position: relative;
          overflow: hidden;
          border-radius: var(--r-lg);
          user-select: none;
          cursor: grab;
        }
        .product-slider:active { cursor: grabbing; }
        .slider-track {
          display: flex;
          will-change: transform;
        }
        .slider-slide {
          flex: 0 0 100%;
          min-width: 0;
          transition: opacity 0.6s var(--ease-out);
          opacity: 0.35;
        }
        .slider-slide.on { opacity: 1; }

        .product-stage {
          background: var(--bg-0);
          border: 1px solid var(--line);
          border-radius: var(--r-lg);
          overflow: hidden;
        }
        .product-stage-inner {
          aspect-ratio: 16 / 9;
          background: #0b0b0b;
          position: relative;
          overflow: hidden;
        }

        .slider-edge {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 48px; height: 48px;
          border-radius: 50%;
          background: rgba(10,10,10,0.7);
          border: 1px solid var(--line-strong);
          color: var(--ink-0);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          display: inline-flex; align-items: center; justify-content: center;
          transition: background 0.2s, opacity 0.2s, transform 0.2s;
          z-index: 2;
        }
        .slider-edge:hover:not(:disabled) { background: var(--lime); color: #0a0a0a; }
        .slider-edge:disabled { opacity: 0.25; cursor: default; }
        .slider-edge.prev { left: 16px; }
        .slider-edge.next { right: 16px; }
        @media (max-width: 720px) { .slider-edge { display: none; } }

        /* Dots row */
        .slider-dots {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          margin-top: 24px;
        }
        .sd {
          text-align: left;
          padding: 14px 0 0;
          background: transparent;
          color: var(--ink-3);
          display: grid;
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto;
          column-gap: 12px;
          row-gap: 10px;
          align-items: center;
          transition: color 0.3s;
        }
        .sd:hover { color: var(--ink-1); }
        .sd.on { color: var(--ink-0); }
        .sd-label { font-size: 11px; grid-row: 1 / 2; grid-column: 1 / 2; }
        .sd-name { font-size: 13px; grid-row: 1 / 2; grid-column: 2 / 3; }
        .sd-bar {
          grid-column: 1 / -1; grid-row: 2 / 3;
          height: 2px; background: var(--line);
          overflow: hidden;
          border-radius: 2px;
        }
        .sd-fill {
          display: block; height: 100%; width: 0%;
          background: var(--lime);
          transition: width 0.5s var(--ease-out);
        }
        .sd.on .sd-fill { width: 100%; }
        @media (max-width: 720px) {
          .slider-dots { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

function BrowserChrome() {
  return (
    <div className="browser-chrome">
      <div style={{ display: 'flex', gap: 6 }}>
        <span style={{ width: 11, height: 11, borderRadius: 50, background: '#2a2a2a' }} />
        <span style={{ width: 11, height: 11, borderRadius: 50, background: '#2a2a2a' }} />
        <span style={{ width: 11, height: 11, borderRadius: 50, background: '#2a2a2a' }} />
      </div>
      <div className="browser-url mono">
        <svg width="11" height="11" viewBox="0 0 14 14" fill="none"><path d="M4 7V5a3 3 0 016 0v2M3 7h8v5H3z" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg>
        reesite.com/builder
      </div>
      <div style={{ width: 80 }} />
      <style>{`
        .browser-chrome {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 10px 16px;
          background: var(--bg-2);
          border-bottom: 1px solid var(--line);
        }
        .browser-url {
          flex: 1;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 11px;
          color: var(--ink-3);
          background: var(--bg-1);
          padding: 5px 12px;
          border-radius: 6px;
          border: 1px solid var(--line);
          max-width: 300px;
          margin: 0 auto;
          justify-content: center;
        }
      `}</style>
    </div>
  );
}

/* --- Stylized mock of the builder canvas --- */
function MockBuilder() {
  return (
    <div className="mock mock-builder">
      {/* top bar */}
      <div className="mock-topbar">
        <div className="mock-logo">
          <img src="assets/logo-cream.png" alt="Ree" style={{ height: 14, display: 'block' }}/>
        </div>
        <div className="mock-toolbar">
          <span>Pages</span>
          <span>Customize</span>
          <span className="active">Edit</span>
        </div>
        <div className="mock-actions">
          <span>Preview</span>
          <span className="mock-publish">Publish</span>
        </div>
      </div>
      {/* body */}
      <div className="mock-body">
        <div className="mock-sidebar">
          {['Hero', 'Feature grid', 'Testimonials', 'Pricing', 'Footer'].map((s, i) => (
            <div key={s} className={`mock-sb-item ${i === 0 ? 'active' : ''}`}>
              <span className="sb-dot" />
              {s}
            </div>
          ))}
        </div>
        <div className="mock-canvas">
          <div className="canvas-hero">
            <div className="ch-bg" />
            <div className="ch-content">
              <div className="ch-title">BUILD BEAUTIFUL, GREEN<br/>WEBSITES IN MINUTES</div>
              <div className="ch-sub">Get your business online in under 3 minutes.</div>
              <div className="ch-btn">Start for free →</div>
            </div>
            <div className="ch-selected" />
          </div>
          <div className="canvas-logos">
            {['LUMI', 'ATP', '◈', 'LOGO', 'DI', 'N'].map((l, i) => <div key={i} className="cl">{l}</div>)}
          </div>
        </div>
        <div className="mock-right">
          <div className="mr-title">Hero section</div>
          <Field label="Background" value="gradient.green.02" />
          <Field label="Headline size" value="XL · 96px" />
          <Field label="Color" value="#D4FF3A" swatch="var(--lime)"/>
          <Field label="Corner radius" value="12 px" />
          <div className="mr-title" style={{ marginTop: 20 }}>Spacing</div>
          <Field label="Padding Y" value="120 px"/>
        </div>
      </div>

      <style>{`
        .mock { position: absolute; inset: 0; color: var(--ink-1); display: flex; flex-direction: column; font-size: 11px; }
        .mock-topbar {
          height: 44px;
          display: flex;
          align-items: center;
          padding: 0 16px;
          background: var(--bg-1);
          border-bottom: 1px solid var(--line);
          gap: 24px;
        }
        .mock-logo { font-weight: 700; font-family: var(--font-display); font-size: 13px; }
        .mock-toolbar { flex: 1; display: flex; justify-content: center; gap: 22px; color: var(--ink-3); }
        .mock-toolbar .active { color: var(--ink-0); }
        .mock-actions { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
        .mock-publish { background: var(--lime); color: #0a0a0a; padding: 6px 12px; border-radius: 999px; font-weight: 600; }

        .mock-body { flex: 1; display: grid; grid-template-columns: 160px 1fr 200px; background: var(--bg-0); min-height: 0; }
        .mock-sidebar { background: var(--bg-1); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
        .mock-sb-item { padding: 8px 10px; border-radius: 6px; display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 11px; }
        .mock-sb-item.active { background: rgba(212,255,58,0.08); color: var(--lime); }
        .sb-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }

        .mock-canvas { padding: 24px; overflow: hidden; }
        .canvas-hero {
          position: relative;
          height: 58%;
          min-height: 140px;
          border-radius: 10px;
          overflow: hidden;
          background: linear-gradient(135deg, #0e2a12 0%, #1c5227 60%, #2d7a3a 100%);
          display: flex;
          align-items: center;
          padding: 24px;
        }
        .ch-bg {
          position: absolute; inset: 0;
          background:
            radial-gradient(60% 80% at 80% 60%, rgba(159,232,112,0.25) 0%, transparent 60%),
            radial-gradient(40% 60% at 20% 20%, rgba(255,255,255,0.05) 0%, transparent 60%);
        }
        .ch-content { position: relative; color: white; }
        .ch-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
        .ch-sub { font-size: 10px; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
        .ch-btn { display: inline-block; background: var(--lime); color: #0a0a0a; padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 11px; }
        .ch-selected { position: absolute; inset: 2px; border: 1.5px solid var(--lime); border-radius: 10px; pointer-events: none; }
        .ch-selected::before, .ch-selected::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--lime); border-radius: 2px; }
        .ch-selected::before { left: -4px; top: -4px; }
        .ch-selected::after { right: -4px; bottom: -4px; }

        .canvas-logos { display: flex; justify-content: space-around; align-items: center; padding: 16px 0; color: var(--ink-3); font-size: 11px; }
        .cl { opacity: 0.6; font-weight: 600; }

        .mock-right { background: var(--bg-1); border-left: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
        .mr-title { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
      `}</style>
    </div>
  );
}

function Field({ label, value, swatch }) {
  return (
    <div className="field-row">
      <div className="f-label">{label}</div>
      <div className="f-value">
        {swatch && <span className="f-swatch" style={{ background: swatch }} />}
        {value}
      </div>
      <style>{`
        .field-row { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; }
        .f-label { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
        .f-value { font-size: 11px; color: var(--ink-0); display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); }
        .f-swatch { width: 10px; height: 10px; border-radius: 3px; }
      `}</style>
    </div>
  );
}

/* --- Other tab mocks (simpler, showcasing different screens) --- */
function MockBrand() {
  return (
    <div className="mock-brand">
      <div className="mb-card">
        <div className="mb-step mono">STEP 5 OF 6</div>
        <h3 className="mb-title">Set your brand kit</h3>
        <p className="mb-sub">Choose colors, fonts, and style that represent your brand.</p>

        <div className="mb-section">Brand Colors</div>
        <div className="mb-grid">
          <Swatch label="Primary" value="#00562D" bg="#00562D"/>
          <Swatch label="Secondary" value="#FFFFFF" bg="#fff"/>
          <Swatch label="Accent" value="#D9F872" bg="#D9F872"/>
          <Swatch label="Neutral" value="#F5F5F0" bg="#F5F5F0"/>
        </div>

        <div className="mb-section">Typography</div>
        <div className="mb-row">
          <Field label="Heading font" value="PP Neue Corp"/>
          <Field label="Body font" value="Söhne"/>
        </div>

        <div className="mb-section">Corner Radius</div>
        <div className="mb-pills">
          {['None', 'Small', 'Medium', 'Large', 'Extra-large'].map((r, i) => (
            <span key={r} className={`mb-pill ${i === 2 ? 'active' : ''}`}>{r}</span>
          ))}
        </div>
      </div>
      <style>{`
        .mock-brand { position: absolute; inset: 0; padding: 24px; background: var(--bg-0); overflow: hidden; display: grid; place-items: center; }
        .mb-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 28px; width: min(520px, 92%); font-size: 12px; }
        .mb-step { font-size: 10px; color: var(--mint); margin-bottom: 8px; letter-spacing: 0.15em; }
        .mb-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; letter-spacing: -0.02em; }
        .mb-sub { color: var(--ink-2); font-size: 12px; margin: 0 0 20px; }
        .mb-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 14px; margin-bottom: 8px; }
        .mb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .mb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .mb-pills { display: flex; gap: 6px; flex-wrap: wrap; }
        .mb-pill { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--ink-2); }
        .mb-pill.active { background: var(--lime); color: #0a0a0a; border-color: var(--lime); }
      `}</style>
    </div>
  );
}

function Swatch({ label, value, bg }) {
  return (
    <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 6, padding: 6 }}>
      <div style={{ width: '100%', aspectRatio: 1, borderRadius: 4, background: bg, marginBottom: 6 }}/>
      <div style={{ fontSize: 9, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</div>
      <div style={{ fontSize: 10, color: 'var(--ink-0)', fontFamily: 'var(--font-mono)' }}>{value}</div>
    </div>
  );
}

function MockPages() {
  return (
    <div className="mock-pages">
      <div className="mp-panel">
        <div className="mp-head">
          <div>
            <h4 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 18 }}>Pages</h4>
            <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Manage your pages · edit, reorder, or add.</div>
          </div>
          <span className="mp-add">+ Add new page</span>
        </div>
        <div className="mp-list">
          {['Home', 'About', 'Contact', 'Pricing', 'Blog'].map((p, i) => (
            <div key={p} className={`mp-item ${i === 0 ? 'active' : ''}`}>
              <span className="mp-grip">⋮⋮</span>
              <span>{p}</span>
              {i === 0 && <span className="mp-tag">Homepage</span>}
              <span className="mp-dot" style={{ marginLeft: 'auto' }}>···</span>
            </div>
          ))}
        </div>
      </div>
      <div className="mp-detail">
        <div className="mp-sec">Homepage settings</div>
        <Field label="Page title" value="Home"/>
        <Field label="Slug" value="/"/>
        <Field label="Description" value="Welcome to our homepage."/>
        <div className="mp-sec">Navigation</div>
        <Field label="Show in nav" value="Yes"/>
        <Field label="SEO · Index" value="Enabled"/>
      </div>
      <style>{`
        .mock-pages { position: absolute; inset: 0; padding: 24px; background: var(--bg-0); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .mp-panel, .mp-detail { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 18px; overflow: hidden; }
        .mp-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px; }
        .mp-add { font-size: 11px; color: var(--mint); }
        .mp-list { display: flex; flex-direction: column; gap: 6px; }
        .mp-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; background: var(--bg-2); font-size: 12px; color: var(--ink-1); }
        .mp-item.active { background: rgba(212,255,58,0.08); color: var(--ink-0); border: 1px solid rgba(212,255,58,0.25); }
        .mp-grip { color: var(--ink-3); font-size: 10px; }
        .mp-tag { background: var(--mint); color: #0a0a0a; font-size: 9px; padding: 2px 6px; border-radius: 999px; font-weight: 600; }
        .mp-dot { color: var(--ink-3); font-size: 14px; }
        .mp-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin: 6px 0 10px; }
        .mp-detail .field-row + .field-row { margin-top: 6px; }
      `}</style>
    </div>
  );
}

function MockTemplates() {
  const templates = [
    { bg: 'linear-gradient(135deg,#ff8c42,#ffd166)', name: 'Studio' },
    { bg: 'linear-gradient(135deg,#1e3a5f,#5a8bb8)', name: 'Brooklyn' },
    { bg: 'linear-gradient(135deg,#a8c9e8,#d4e4f5)', name: 'Coast' },
    { bg: 'linear-gradient(135deg,#fce1e4,#f8c9d4)', name: 'Bloom' },
    { bg: 'linear-gradient(135deg,#e63946,#ffd60a)', name: 'Forest' },
    { bg: 'linear-gradient(135deg,#f4a261,#e76f51)', name: 'Agency' },
    { bg: 'linear-gradient(135deg,#2a9d8f,#264653)', name: 'Goods' },
    { bg: 'linear-gradient(135deg,#0e2a12,#1c5227)', name: 'Shapes' },
  ];
  return (
    <div className="mock-temp">
      <div className="mt-head">
        <h4 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em' }}>Select a website template</h4>
        <p style={{ fontSize: 11, color: 'var(--ink-2)', margin: '4px 0 0' }}>Know which template to pick? Start fresh and we'll guide you through designing a site of your own.</p>
      </div>
      <div className="mt-cats">
        {['All', 'Personal', 'Restaurant', 'Education', 'E-commerce', 'Healthcare', 'Tech'].map((c, i) => (
          <span key={c} className={`mt-cat ${i === 0 ? 'active' : ''}`}>{c}</span>
        ))}
      </div>
      <div className="mt-grid">
        {templates.map((t, i) => (
          <div key={i} className="mt-card">
            <div className="mt-thumb" style={{ background: t.bg }} />
            <div className="mt-name">{t.name}</div>
          </div>
        ))}
      </div>
      <style>{`
        .mock-temp { position: absolute; inset: 0; padding: 24px; background: var(--bg-0); overflow: hidden; }
        .mt-head { text-align: center; margin-bottom: 14px; }
        .mt-cats { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
        .mt-cat { padding: 5px 11px; border-radius: 999px; font-size: 11px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); }
        .mt-cat.active { background: var(--ink-0); color: #0a0a0a; border-color: var(--ink-0); }
        .mt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .mt-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
        .mt-thumb { aspect-ratio: 4 / 3; }
        .mt-name { padding: 8px 10px; font-size: 11px; color: var(--ink-1); }
      `}</style>
    </div>
  );
}

function MockPublish() {
  return (
    <div className="mock-pub">
      <div className="mp-dialog">
        <div className="mp-dialog-head">
          <h4 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 18 }}>Publish site</h4>
          <span style={{ color: 'var(--ink-3)', fontSize: 16 }}>×</span>
        </div>
        <Field label="Site URL" value="mystudio.reesite.com"/>
        <Field label="Custom domain" value="mystudio.design · Connected"/>
        <Field label="SSL" value="Auto-provisioned"/>
        <Field label="Hosting region" value="EU West · 100% renewable"/>
        <Field label="Carbon budget" value="0.08g / view · Under target"/>
        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: 'var(--mint)' }}>Copy URL</span>
          <span style={{ display: 'flex', gap: 8 }}>
            <span style={{ padding: '7px 14px', border: '1px solid var(--line)', borderRadius: 999, fontSize: 11 }}>Cancel</span>
            <span style={{ padding: '7px 14px', background: 'var(--lime)', color: '#0a0a0a', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>Publish</span>
          </span>
        </div>
      </div>
      <style>{`
        .mock-pub { position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 50%, #143d1a, #050a06); display: grid; place-items: center; padding: 24px; }
        .mp-dialog { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: min(460px, 92%); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 40px 80px rgba(0,0,0,0.5); }
        .mp-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
      `}</style>
    </div>
  );
}

Object.assign(window, { Product });