// Hi-fi "Kitchen Takeovers" landing page.
// Single-page, desktop-first, responsive down to mobile.
// Features: animated line-illustrated hero cycling six F&B themes, editorial
// scroll, survey + optional POST to /api/interest, tweaks panel in dev.

// ── Palettes ─────────────────────────────────────────────────────────────
const PALETTES = {
  warm: {
    name: 'Warm & earthy',
    paper: '#f4ede0',
    paperDeep: '#ebe1cd',
    ink: '#1e1a14',
    inkSoft: '#4a4238',
    mute: '#8a7f6c',
    line: '#d6ccb7',
    accent: '#b85c3a',
    accentSoft: '#ecd7cc'
  },
  // Warm variations
  warmSand: {
    name: 'Warm · Sand',
    paper: '#f7f1e4', paperDeep: '#ece2cb',
    ink: '#221c12', inkSoft: '#534835', mute: '#968a73',
    line: '#dccfb4', accent: '#8a4a1f', accentSoft: '#e8d0b8'
  },
  warmClay: {
    name: 'Warm · Clay',
    paper: '#efe3d2', paperDeep: '#e2d1b6',
    ink: '#1f1510', inkSoft: '#4a3427', mute: '#8c7864',
    line: '#cfbe9f', accent: '#c4501e', accentSoft: '#f0cfbc'
  },
  warmMoss: {
    name: 'Warm · Moss',
    paper: '#f2ecdb', paperDeep: '#e5dcc3',
    ink: '#1a1d12', inkSoft: '#3d4227', mute: '#7e836a',
    line: '#cac9ad', accent: '#5a6b2c', accentSoft: '#dde0bf'
  },
  mono: {
    name: 'Swiss mono',
    paper: '#f5f4f1',
    paperDeep: '#ecebe6',
    ink: '#0f0f0e',
    inkSoft: '#3a3a38',
    mute: '#86857f',
    line: '#d6d4cc',
    accent: '#1e1e1c',
    accentSoft: '#e4e3dc'
  },
  dusk: {
    name: 'Dusk',
    paper: '#f2eee8',
    paperDeep: '#e5dfd4',
    ink: '#1a1820',
    inkSoft: '#403b4a',
    mute: '#807a8a',
    line: '#d1cdd5',
    accent: '#6a5acd',
    accentSoft: '#e0daf0'
  },
  // Dusk variations
  duskPlum: {
    name: 'Dusk · Plum',
    paper: '#f1ecec', paperDeep: '#e5d8d8',
    ink: '#1c1418', inkSoft: '#3f2f38', mute: '#88727e',
    line: '#d3c4c9', accent: '#8a2553', accentSoft: '#ebcfd9'
  },
  duskOrchid: {
    name: 'Dusk · Orchid',
    paper: '#f4edf0', paperDeep: '#e8dbe4',
    ink: '#1a1018', inkSoft: '#3e2836', mute: '#846a7c',
    line: '#d4c3cd', accent: '#b14d8a', accentSoft: '#eed2e2'
  },
  duskSlate: {
    name: 'Dusk · Slate',
    paper: '#ecedee', paperDeep: '#dee1e3',
    ink: '#0f1218', inkSoft: '#2c3442', mute: '#6f7886',
    line: '#c4c9d0', accent: '#3b55b5', accentSoft: '#d0d8ee'
  },
  // Oxblood on olive — moody bistro
  cellar: {
    name: 'Cellar',
    paper: '#eceae1', paperDeep: '#dedbc9',
    ink: '#141613', inkSoft: '#3a3d36', mute: '#7a7c70',
    line: '#c9c6b4', accent: '#6b1f22', accentSoft: '#e2cdce'
  },
  // Sea & salt — cool coastal
  harbour: {
    name: 'Harbour',
    paper: '#eef1ee', paperDeep: '#dde3df',
    ink: '#0e1a1c', inkSoft: '#2e4046', mute: '#6c8085',
    line: '#c2cecb', accent: '#1f6e6a', accentSoft: '#cde2df'
  },
  // Ink on lemon — confident editorial
  citron: {
    name: 'Citron',
    paper: '#f3efd8', paperDeep: '#e8e1b7',
    ink: '#1a1a12', inkSoft: '#3b3b26', mute: '#7c7b58',
    line: '#cfc998', accent: '#1a1a12', accentSoft: '#d9d391'
  },
  // Deep navy + cream — classic fine-dining
  harbormaster: {
    name: 'Harbormaster',
    paper: '#f0ece4', paperDeep: '#e2dcce',
    ink: '#0a1424', inkSoft: '#20334a', mute: '#627589',
    line: '#c4cbd4', accent: '#c95a2c', accentSoft: '#f1d1be'
  },
  // Harbormaster variations
  harbormasterBrass: {
    name: 'Harbormaster · Brass',
    paper: '#f1ebdc', paperDeep: '#e2d9bf',
    ink: '#0c1828', inkSoft: '#223a58', mute: '#67788e',
    line: '#c7cdd5', accent: '#b8891a', accentSoft: '#ecdaa4'
  },
  harbormasterRegatta: {
    name: 'Harbormaster · Regatta',
    paper: '#eef0ec', paperDeep: '#dde2d9',
    ink: '#091626', inkSoft: '#1d304a', mute: '#5f728a',
    line: '#c1cad1', accent: '#a61f2a', accentSoft: '#ebcacd'
  },
  harbormasterFog: {
    name: 'Harbormaster · Fog',
    paper: '#ebeef1', paperDeep: '#dae0e6',
    ink: '#0a1422', inkSoft: '#1e3144', mute: '#5e7182',
    line: '#bfc8d0', accent: '#256b73', accentSoft: '#c5dde0'
  },
  // Ink noir — dark mode
  charcoal: {
    name: 'Charcoal',
    paper: '#17181a', paperDeep: '#1f2023',
    ink: '#f2efe7', inkSoft: '#b8b4a9', mute: '#7a7771',
    line: '#34353a', accent: '#e9b949', accentSoft: '#2a2823'
  },
  // Charcoal variations
  charcoalEmber: {
    name: 'Charcoal · Ember',
    paper: '#171210', paperDeep: '#201816',
    ink: '#f3ebe2', inkSoft: '#bdb0a3', mute: '#7d6f63',
    line: '#362c27', accent: '#e5633a', accentSoft: '#2c201a'
  },
  charcoalMint: {
    name: 'Charcoal · Mint',
    paper: '#121715', paperDeep: '#1a201d',
    ink: '#ebf0ec', inkSoft: '#a9b4ae', mute: '#6c7872',
    line: '#2e3632', accent: '#63d2a1', accentSoft: '#1d2824'
  },
  charcoalMagenta: {
    name: 'Charcoal · Magenta',
    paper: '#140f14', paperDeep: '#1c151c',
    ink: '#f0e9ef', inkSoft: '#b5a9b1', mute: '#7a6d76',
    line: '#312832', accent: '#f0478c', accentSoft: '#2a1d26'
  },
  // Hot pink pop — diner / street-food energy
  neon: {
    name: 'Hot Counter',
    paper: '#f6eee3', paperDeep: '#ebe0cf',
    ink: '#1a0d18', inkSoft: '#3c1f36', mute: '#8a6b81',
    line: '#d8c6c8', accent: '#e6357e', accentSoft: '#f6d3e2'
  },
  // Hot Counter variations
  neonTangerine: {
    name: 'Hot Counter · Tangerine',
    paper: '#f7f1e4', paperDeep: '#ede3ca',
    ink: '#1a0f06', inkSoft: '#3e2510', mute: '#8b7453',
    line: '#dcc9a8', accent: '#ff5a1f', accentSoft: '#fcd0b8'
  },
  neonElectric: {
    name: 'Hot Counter · Electric',
    paper: '#f4f0dd', paperDeep: '#e9e1bb',
    ink: '#0c1410', inkSoft: '#244030', mute: '#5f7968',
    line: '#c9cca3', accent: '#0a8f43', accentSoft: '#c8e6c8'
  },
  neonIce: {
    name: 'Hot Counter · Ice',
    paper: '#eef2f3', paperDeep: '#dde5e8',
    ink: '#0a1118', inkSoft: '#1f3142', mute: '#5f7688',
    line: '#bfcbd2', accent: '#0073e6', accentSoft: '#c5dbf0'
  }
};

const FONT_PAIRS = {
  editorial: {
    name: 'Instrument Serif + Inter',
    serif: '"Instrument Serif", "Cormorant Garamond", Georgia, serif',
    sans: '"Inter", system-ui, sans-serif',
    mono: '"IBM Plex Mono", ui-monospace, Menlo, monospace'
  },
  modern: {
    name: 'Fraunces + DM Sans',
    serif: '"Fraunces", "Instrument Serif", Georgia, serif',
    sans: '"DM Sans", "Inter", system-ui, sans-serif',
    mono: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace'
  },
  classic: {
    name: 'Cormorant + Manrope',
    serif: '"Cormorant Garamond", "Instrument Serif", Georgia, serif',
    sans: '"Manrope", "Inter", system-ui, sans-serif',
    mono: '"IBM Plex Mono", ui-monospace, Menlo, monospace'
  }
};

// ── Small primitives ─────────────────────────────────────────────────────
function Eyebrow({ children, color, style = {}, t }) {
  return <div style={{ fontFamily: t.fonts.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: color || t.p.accent, ...style }}>{children}</div>;
}
function Button({ children, primary, full, t, onClick, style = {}, disabled }) {
  return (
    <button type="button" disabled={disabled} onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      padding: '14px 22px',
      background: primary ? t.p.ink : 'transparent',
      color: primary ? t.p.paper : t.p.ink,
      border: `1px solid ${t.p.ink}`,
      fontFamily: t.fonts.sans, fontSize: 14, fontWeight: 500, letterSpacing: '0.01em',
      width: full ? '100%' : 'auto', cursor: disabled ? 'not-allowed' : 'pointer', transition: 'all 180ms ease',
      boxSizing: 'border-box', borderRadius: 0, opacity: disabled ? 0.55 : 1, ...style
    }}>{children}</button>);

}
function Input({ label, area, required, t, compact, value, onChange }) {
  const common = {
    border: `1px solid ${t.p.line}`, background: '#fff', padding: '12px 14px',
    fontFamily: t.fonts.sans, fontSize: 14, color: t.p.ink, outline: 'none', borderRadius: 0
  };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: t.p.mute }}>
        {label}{required && <span style={{ color: t.p.accent }}> *</span>}
      </span>
      {area ?
      <textarea rows={compact ? 2 : 3} value={value} onChange={onChange} style={{ ...common, resize: 'vertical' }} /> :

      <input type="text" value={value} onChange={onChange} style={common} />
      }
    </label>);

}
function Chip({ children, selected, onClick, t }) {
  return (
    <button onClick={onClick} style={{
      padding: '9px 14px',
      border: `1px solid ${selected ? t.p.accent : t.p.line}`,
      background: selected ? t.p.accentSoft : '#fff',
      color: selected ? t.p.accent : t.p.ink,
      fontFamily: t.fonts.sans, fontSize: 13, cursor: 'pointer', borderRadius: 0,
      transition: 'all 160ms ease'
    }}>{children}</button>);

}

// ── Hero theme auto-cycler ───────────────────────────────────────────────
// Keep one interval; skip ticks while paused (avoids resetting phase on hover).
function useAutoCycle(count, ms, paused) {
  const [i, setI] = React.useState(0);
  const pausedRef = React.useRef(paused);
  pausedRef.current = paused;
  React.useEffect(() => {
    const id = setInterval(() => {
      if (pausedRef.current) return;
      setI((x) => (x + 1) % count);
    }, ms);
    return () => clearInterval(id);
  }, [count, ms]);
  return [i, setI];
}

// ── Tier card ────────────────────────────────────────────────────────────
function TierCard({ n, title, items, selected, onClick, t }) {
  return (
    <div onClick={onClick} style={{
      padding: 20,
      border: `${selected ? 2 : 1}px solid ${selected ? t.p.accent : t.p.line}`,
      background: selected ? t.p.accentSoft : '#fff',
      cursor: 'pointer', position: 'relative', borderRadius: 0,
      transition: 'all 200ms ease'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <span style={{ fontFamily: t.fonts.mono, fontSize: 10, color: selected ? t.p.accent : t.p.mute, letterSpacing: '0.14em' }}>TIER {n}</span>
        <div style={{ width: 16, height: 16, borderRadius: '50%', border: `1px solid ${selected ? t.p.accent : t.p.line}`, background: selected ? t.p.accent : 'transparent' }} />
      </div>
      <div style={{ fontFamily: t.fonts.serif, fontSize: 24, marginBottom: 10, lineHeight: 1.15 }}>{title}</div>
      <div style={{ fontFamily: t.fonts.sans, fontSize: 13, lineHeight: 1.55, color: t.p.inkSoft }}>
        {items.map((x, i) => <div key={i} style={{ padding: '2px 0' }}>· {x}</div>)}
      </div>
    </div>);

}

// ── Price slider ─────────────────────────────────────────────────────────
function PriceSlider({ label, value, onChange, t }) {
  const min = 0,max = 12000,step = 250;
  const pct = (value - min) / (max - min) * 100;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ fontFamily: t.fonts.sans, fontSize: 15, color: t.p.ink, lineHeight: 1.45 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <div style={{ fontFamily: t.fonts.serif, fontSize: 44, letterSpacing: '-0.02em', color: t.p.accent, lineHeight: 1 }}>
          ${value.toLocaleString()}
        </div>
        <div style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, letterSpacing: '0.12em' }}>/ MONTH</div>
      </div>
      <div style={{ position: 'relative', height: 28, display: 'flex', alignItems: 'center' }}>
        <div style={{ position: 'absolute', left: 0, right: 0, height: 2, background: t.p.line }} />
        <div style={{ position: 'absolute', left: 0, height: 2, background: t.p.accent, width: `${pct}%` }} />
        <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        style={{ position: 'absolute', left: 0, right: 0, width: '100%', background: 'transparent', accentColor: t.p.accent, margin: 0 }} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: t.fonts.mono, fontSize: 9, color: t.p.mute, letterSpacing: '0.1em' }}>
        <span>$0</span><span>$6K</span><span>$12K</span>
      </div>
    </div>);

}

// ── Survey block ─────────────────────────────────────────────────────────
function Survey({ t, interestEndpoint }) {
  const [s, setS] = React.useState({
    priceExpensive: 7500, priceGoodDeal: 4500,
    addOns: ['Kitchen only'],
    stage: 'Home cook / catering', timeline: 'Next 3 mo',
    rentalLength: '1 month', volume: '40–80 covers'
  });
  const [fields, setFields] = React.useState({
    fullName: '', email: '', phone: '', instagram: '',
    conceptName: '', cuisineType: '', conceptDescription: '',
    hesitation: '', easyYes: ''
  });
  const [submitState, setSubmitState] = React.useState('idle');
  const [submitError, setSubmitError] = React.useState('');
  const set = (k) => (v) => setS((p) => ({ ...p, [k]: v }));
  const setField = (k) => (e) => setFields((p) => ({ ...p, [k]: e.target.value }));
  const toggleAddOn = (name) => setS((p) => ({
    ...p,
    addOns: p.addOns.includes(name) ? p.addOns.filter((x) => x !== name) : [...p.addOns, name]
  }));

  const addOns = [
    { name: 'Stall design & branding', desc: 'Menu, signage, photography — designed in-house.' },
    { name: 'Marketing & footfall', desc: 'We drive real customers to the space.' },
    { name: 'POS & sales data', desc: 'Real-time dashboard of performance.' },
    { name: 'Content & exposure', desc: 'Photo / video capture, featured on our channels.' },
    { name: 'Post-slot debrief', desc: 'Honest advisory: did it work? What next?' },
    { name: 'Staffing support', desc: 'Help hiring or borrowing line cooks for your slot.' }
  ];

  const validate = () => {
    const missing = [];
    if (!fields.fullName.trim()) missing.push('full name');
    if (!fields.email.trim()) missing.push('email');
    if (!fields.phone.trim()) missing.push('phone');
    if (!fields.conceptName.trim()) missing.push('concept name');
    if (!fields.conceptDescription.trim()) missing.push('concept description');
    return missing;
  };

  const submitInterest = async () => {
    setSubmitError('');
    const missing = validate();
    if (missing.length) {
      setSubmitError(`Please add: ${missing.join(', ')}.`);
      return;
    }
    if (!interestEndpoint || !String(interestEndpoint).trim()) {
      setSubmitError('Form is not connected yet (no interestEndpoint). For local testing, set window.KT_CONFIG.interestEndpoint.');
      return;
    }
    const payload = {
      ...fields,
      ...s,
      submittedAt: new Date().toISOString(),
      source: typeof location !== 'undefined' ? location.href : ''
    };
    setSubmitState('submitting');
    try {
      const res = await fetch(String(interestEndpoint).trim(), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) {
        const text = await res.text().catch(() => '');
        throw new Error(text || `Request failed (${res.status})`);
      }
      setSubmitState('success');
    } catch (e) {
      setSubmitState('idle');
      setSubmitError(e.message || 'Something went wrong. Please try again or email hello@kitchentakeovers.sg');
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 44 }}>
      {/* 01 Contact */}
      <section>
        <Eyebrow t={t} style={{ marginBottom: 16 }}>01 · About you</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
          <Input t={t} label="Full name" required value={fields.fullName} onChange={setField('fullName')} />
          <Input t={t} label="Email" required value={fields.email} onChange={setField('email')} />
          <Input t={t} label="Phone / WhatsApp" required value={fields.phone} onChange={setField('phone')} />
          <Input t={t} label="Instagram or portfolio (optional)" value={fields.instagram} onChange={setField('instagram')} />
        </div>
      </section>

      {/* 02 Concept */}
      <section>
        <Eyebrow t={t} style={{ marginBottom: 16 }}>02 · Your concept</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
          <Input t={t} label="Concept name" required value={fields.conceptName} onChange={setField('conceptName')} />
          <Input t={t} label="Cuisine type" value={fields.cuisineType} onChange={setField('cuisineType')} />
        </div>
        <div style={{ marginTop: 16 }}>
          <Input t={t} label="Describe your concept in a sentence or two" area required value={fields.conceptDescription} onChange={setField('conceptDescription')} />
        </div>
        <div style={{ marginTop: 20 }}>
          <div style={{ fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: t.p.mute, marginBottom: 10 }}>Where are you today?</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {['Just an idea', 'Home cook / catering', 'Pop-up experience', 'Established brand', 'Chef, between roles'].map((x) =>
            <Chip key={x} t={t} selected={s.stage === x} onClick={() => set('stage')(x)}>{x}</Chip>
            )}
          </div>
        </div>
      </section>

      {/* 03 Logistics */}
      <section>
        <Eyebrow t={t} style={{ marginBottom: 16 }}>03 · Logistics</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 28 }}>
          <div>
            <div style={{ fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: t.p.mute, marginBottom: 10 }}>When would you want to start?</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['ASAP', 'Next 3 mo', '3–6 mo', '6+ mo', 'Just exploring'].map((x) =>
              <Chip key={x} t={t} selected={s.timeline === x} onClick={() => set('timeline')(x)}>{x}</Chip>
              )}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: t.p.mute, marginBottom: 10 }}>How long would you want the space?</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['1 month', '2 months', '3 months', 'Flexible'].map((x) =>
              <Chip key={x} t={t} selected={s.rentalLength === x} onClick={() => set('rentalLength')(x)}>{x}</Chip>
              )}
            </div>
          </div>
        </div>
        <div style={{ marginTop: 22 }}>
          <div style={{ fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: t.p.mute, marginBottom: 10 }}>Rough daily volume you'd expect?</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {['< 20 covers', '20–40', '40–80', '80–150', '150+', 'No idea'].map((x) =>
            <Chip key={x} t={t} selected={s.volume === x} onClick={() => set('volume')(x)}>{x}</Chip>
            )}
          </div>
        </div>
      </section>

      {/* 04 Add-ons */}
      <section>
        <Eyebrow t={t} style={{ marginBottom: 8 }}>04 · Which add-ons interest you?</Eyebrow>
        <div style={{ fontFamily: t.fonts.sans, fontSize: 14, color: t.p.inkSoft, lineHeight: 1.55, marginBottom: 18, maxWidth: 620 }}>
          The kitchen itself is the baseline. Pick anything else you'd want bundled in — we're still deciding what to include by default.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 10 }}>
          {addOns.map((a) => {
            const active = s.addOns.includes(a.name);
            return (
              <button key={a.name} onClick={() => toggleAddOn(a.name)} style={{
                textAlign: 'left',
                padding: '18px 20px',
                border: `${active ? 2 : 1}px solid ${active ? t.p.accent : t.p.line}`,
                background: active ? t.p.accentSoft : '#fff',
                color: t.p.ink,
                cursor: 'pointer', borderRadius: 0,
                transition: 'all 180ms ease',
                display: 'flex', gap: 14, alignItems: 'flex-start'
              }}>
                <div style={{
                  flexShrink: 0, marginTop: 2,
                  width: 16, height: 16,
                  border: `1.5px solid ${active ? t.p.accent : t.p.mute}`,
                  background: active ? t.p.accent : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  {active && (
                    <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                      <path d="M2 6 L5 9 L10 3" stroke={t.p.paper} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  )}
                </div>
                <div>
                  <div style={{ fontFamily: t.fonts.serif, fontSize: 19, lineHeight: 1.2, marginBottom: 4 }}>{a.name}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.5, color: t.p.inkSoft }}>{a.desc}</div>
                </div>
              </button>
            );
          })}
        </div>
        <div style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, marginTop: 14, letterSpacing: '0.04em' }}>
          // Select as many as you'd want — or none.
        </div>
      </section>

      {/* 05 Pricing */}
      <section>
        <Eyebrow t={t} style={{ marginBottom: 8 }}>05 · Price check</Eyebrow>
        <div style={{ fontFamily: t.fonts.sans, fontSize: 14, color: t.p.inkSoft, lineHeight: 1.55, marginBottom: 22, maxWidth: 620 }}>
          Imagine a kitchen slot with the add-ons you picked above, for one month. Help us find the right price.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 32, padding: 28, background: t.p.paperDeep, border: `1px solid ${t.p.line}` }}>
          <PriceSlider t={t} value={s.priceExpensive} onChange={set('priceExpensive')}
          label="At what monthly price would this start to feel expensive — but still worth considering?" />
          <PriceSlider t={t} value={s.priceGoodDeal} onChange={set('priceGoodDeal')}
          label="At what monthly price would this feel like a genuinely good deal?" />
        </div>
        <div style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, marginTop: 12, letterSpacing: '0.04em' }}>
          // No commitment. This helps us price the program fairly before we launch.
        </div>
      </section>

      {/* 06 Open */}
      <section>
        <Eyebrow t={t} style={{ marginBottom: 16 }}>06 · Last thoughts</Eyebrow>
        <div style={{ display: 'grid', gap: 16 }}>
          <Input t={t} label="What's your biggest hesitation about trying something like this?" area value={fields.hesitation} onChange={setField('hesitation')} />
          <Input t={t} label="What would make this an easy yes for you?" area value={fields.easyYes} onChange={setField('easyYes')} />
        </div>
      </section>

      {/* Submit */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 12 }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button primary t={t} disabled={submitState === 'submitting' || submitState === 'success'} onClick={submitInterest}>
            {submitState === 'success' ? 'Thanks — we received it' : submitState === 'submitting' ? 'Sending…' : 'Send my expression of interest →'}
          </Button>
          {submitState !== 'success' &&
          <span style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, letterSpacing: '0.06em' }}>
            WE REPLY WITHIN 5 WORKING DAYS
          </span>
          }
        </div>
        {submitError &&
        <div style={{ fontFamily: t.fonts.sans, fontSize: 14, color: t.p.accent, maxWidth: 560 }}>{submitError}</div>
        }
        {submitState === 'success' &&
        <div style={{ fontFamily: t.fonts.sans, fontSize: 15, color: t.p.inkSoft, maxWidth: 560 }}>
          We will get back to you within five working days. If anything urgent, email hello@kitchentakeovers.sg.
        </div>
        }
      </div>
    </div>);

}

// ── Nav (responsive with burger) ─────────────────────────────────────────
function Nav({ t }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    { href: '#concept', label: 'The concept' },
    { href: '#included', label: "What's included" },
    { href: '#register', label: 'Help shape it' }
  ];
  React.useEffect(() => {
    document.body.classList.toggle('kt-menu-open', open);
    return () => document.body.classList.remove('kt-menu-open');
  }, [open]);
  const close = () => setOpen(false);

  return (
    <>
      <nav className="kt-nav" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        borderBottom: `1px solid ${t.p.line}`,
        position: 'sticky', top: 0, background: t.p.paper + 'f2', backdropFilter: 'blur(8px)', zIndex: 20
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'baseline', gap: 10, textDecoration: 'none', color: 'inherit' }}>
          <div style={{ fontFamily: t.fonts.serif, fontSize: 26, letterSpacing: '-0.01em' }}>Kitchen Takeovers</div>
          <div style={{ fontFamily: t.fonts.mono, fontSize: 9, letterSpacing: '0.14em', color: t.p.mute }}>· SG · 2026</div>
        </a>
        <div className="kt-nav-links">
          {links.map(l =>
            <a key={l.href} href={l.href} style={{ fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.14em', color: t.p.inkSoft, textDecoration: 'none', textTransform: 'uppercase' }}>{l.label}</a>
          )}
          <Button t={t} style={{ padding: '10px 16px', fontSize: 12 }} onClick={() => document.getElementById('register')?.scrollIntoView({ behavior: 'smooth' })}>Register interest ↗</Button>
        </div>
        <button
          className="kt-nav-burger"
          onClick={() => setOpen(o => !o)}
          aria-label={open ? 'Close menu' : 'Open menu'}
          style={{
            background: 'transparent', border: 'none', padding: 8, cursor: 'pointer',
            color: t.p.ink, width: 40, height: 40
          }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            {open ? (
              <>
                <line x1="5" y1="5" x2="19" y2="19" />
                <line x1="19" y1="5" x2="5" y2="19" />
              </>
            ) : (
              <>
                <line x1="3" y1="7" x2="21" y2="7" />
                <line x1="3" y1="17" x2="21" y2="17" />
              </>
            )}
          </svg>
        </button>
      </nav>

      {/* Fullscreen mobile menu */}
      <div
        className={`kt-mobile-menu${open ? ' open' : ''}`}
        style={{ background: t.p.paper, color: t.p.ink, fontFamily: t.fonts.serif }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 48 }}>
          <div style={{ fontFamily: t.fonts.serif, fontSize: 22, letterSpacing: '-0.01em' }}>Kitchen Takeovers</div>
          <button
            onClick={close}
            aria-label="Close menu"
            style={{ background: 'transparent', border: 'none', padding: 8, cursor: 'pointer', color: t.p.ink }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
              <line x1="5" y1="5" x2="19" y2="19" />
              <line x1="19" y1="5" x2="5" y2="19" />
            </svg>
          </button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', gap: 4 }}>
          {links.map((l, i) =>
            <a
              key={l.href}
              href={l.href}
              onClick={close}
              style={{
                color: t.p.ink,
                fontFamily: t.fonts.serif,
                borderBottom: i === links.length - 1 ? 'none' : `1px solid ${t.p.line}`,
                display: 'block'
              }}>
              <span style={{ fontFamily: t.fonts.mono, fontSize: 11, color: t.p.mute, letterSpacing: '0.16em', marginRight: 16, verticalAlign: 'middle' }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              {l.label}
            </a>
          )}
        </div>
        <div style={{ paddingTop: 24, borderTop: `1px solid ${t.p.line}` }}>
          <Button primary full t={t} onClick={() => { close(); setTimeout(() => document.getElementById('register')?.scrollIntoView({ behavior: 'smooth' }), 100); }}>
            Register your interest →
          </Button>
          <div style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, letterSpacing: '0.14em', marginTop: 16, textAlign: 'center' }}>
            SG · LAUNCHING 2026
          </div>
        </div>
      </div>
    </>
  );
}

// ── Main page ────────────────────────────────────────────────────────────
function HiFiPage({ tweaks, dark, interestEndpoint = '' }) {
  const t = {
    p: PALETTES[tweaks.palette],
    fonts: FONT_PAIRS[tweaks.fontPair]
  };
  const THEMES = ['Bakery', 'Ramen bar', 'Wine bar', 'Taqueria', 'Dumplings', 'Burgers'];
  const [hoverPause, setHoverPause] = React.useState(false);
  const [themeIdx, setThemeIdx] = useAutoCycle(THEMES.length, 2000, hoverPause);

  return (
    <div style={{ background: t.p.paper, color: t.p.ink, fontFamily: t.fonts.sans, minHeight: '100vh' }}>
      {/* Nav */}
      <Nav t={t} />

      {/* Hero */}
      <section id="top" style={{ borderBottom: `1px solid ${t.p.line}` }}>
        <div className="kt-hero-grid" style={{ alignItems: 'stretch' }}>
          <div className="kt-hero-left" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <Eyebrow t={t} style={{ marginBottom: 24 }}>Rotating kitchen · Singapore · Launching 2026</Eyebrow>
            <h1 className="kt-h1" style={{
              fontFamily: t.fonts.serif, lineHeight: 0.98,
              letterSpacing: '-0.035em', margin: 0, fontWeight: 400
            }}>
              Test your F&amp;B concept.<br />
              <span style={{ fontStyle: 'italic', color: t.p.accent }}>Full fit-out.</span>{' '}
              <span style={{ fontStyle: 'italic', color: t.p.accent }}>No commitment.</span>
            </h1>
            <p style={{ fontFamily: t.fonts.sans, fontSize: 18, lineHeight: 1.55, color: t.p.inkSoft, marginTop: 28, maxWidth: 480 }}>
              A fully-equipped commercial kitchen inside a proven, high-footfall venue — leased a month at a time to test your concept against real customers, in a real room, before committing to a long lease of your own.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
              <Button primary t={t} onClick={() => document.getElementById('register')?.scrollIntoView({ behavior: 'smooth' })}>Help shape the program ↓</Button>
              <span style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, letterSpacing: '0.14em' }}>5 MIN · NO COMMITMENT</span>
            </div>
          </div>

          {/* Illustrated hero */}
          <div
            className="kt-hero-right"
            style={{
              background: t.p.paperDeep,
              position: 'relative', display: 'flex', flexDirection: 'column',
              '--kt-line': t.p.line
            }}>
            {/* Caption bar — integrated into the frame, not floating */}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '16px 28px',
              borderBottom: `1px solid ${t.p.line}`,
              background: t.p.paper,
              flexShrink: 0
            }}>
              <div style={{ fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.14em', color: t.p.mute }}>
                ONE KITCHEN →&nbsp;&nbsp;ANY CONCEPT
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ fontFamily: t.fonts.mono, fontSize: 9, letterSpacing: '0.14em', color: t.p.mute }}>
                  {String(themeIdx + 1).padStart(2, '0')} / {String(THEMES.length).padStart(2, '0')}
                </span>
                <div style={{ display: 'flex', gap: 4 }}>
                  {THEMES.map((name, i) =>
                    <button key={i} onClick={() => setThemeIdx(i)} style={{
                      padding: '5px 12px',
                      border: 'none',
                      background: themeIdx === i ? t.p.ink : 'transparent',
                      color: themeIdx === i ? t.p.paper : t.p.mute,
                      fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.12em',
                      cursor: 'pointer', borderRadius: 0, transition: 'all 180ms ease'
                    }}>{name.toUpperCase()}</button>
                  )}
                </div>
              </div>
            </div>
            <div
              style={{ flex: 1, position: 'relative', display: 'flex' }}
              onMouseEnter={() => setHoverPause(true)}
              onMouseLeave={() => setHoverPause(false)}>
              <HiFiHero themeIndex={themeIdx} palette={t.p} />
            </div>
          </div>
        </div>

        {/* Narrative caption removed — hero + theme switcher carry the story */}
      </section>

      {/* The idea */}
      <section id="concept" className="kt-section-idea" style={{ borderBottom: `1px solid ${t.p.line}`, textAlign: 'center' }}>
        <Eyebrow t={t} style={{ marginBottom: 32 }}>02 · The idea</Eyebrow>
        <div className="kt-h2-idea" style={{
          fontFamily: t.fonts.serif, lineHeight: 1.2,
          letterSpacing: '-0.015em', fontWeight: 400, maxWidth: 1000, margin: '0 auto'
        }}>
          Most F&amp;B concepts die in the spreadsheet. Founders commit to a lease, a fit-out and 24 months to find out the idea wasn't quite right. <span style={{ fontStyle: 'italic', color: t.p.accent }}>We think there's a better way.</span>
        </div>
        <div style={{ fontSize: 16, color: t.p.inkSoft, lineHeight: 1.65, maxWidth: 700, margin: '32px auto 0' }}>
          A rotating kitchen: walk into a ready-to-operate space, cook for real customers, get real data, walk out with answers. One month at a time.
        </div>
      </section>

      {/* What's included */}
      <section id="included" className="kt-section" style={{ borderBottom: `1px solid ${t.p.line}` }}>
        <div className="kt-two-col" style={{ marginBottom: 48 }}>
          <div>
            <Eyebrow t={t} style={{ marginBottom: 18 }}>03 · Possible inclusions</Eyebrow>
            <h2 className="kt-h2" style={{ fontFamily: t.fonts.serif, letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, fontWeight: 400 }}>
              A menu of things we could offer. Tell us which you'd actually want.
            </h2>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: t.p.inkSoft, margin: 0 }}>
            Everything on this page is directional. The final offer — and how it's priced — will be shaped by the people who register.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32 }}>
          {[
          ['01', 'The kitchen', 'Range, fryer, fridge, prep tables, sinks, ventilation — ready to go.'],
          ['02', 'Stall design & branding', 'Menu, signage, photography — designed in-house.'],
          ['03', 'Marketing & footfall', 'We drive real customers to the space.'],
          ['04', 'POS & sales data', 'Real-time dashboard so you see performance as it happens.'],
          ['05', 'Content & exposure', 'Photo / video capture, featured on our channels.'],
          ['06', 'Post-slot debrief', 'Honest advisory: did it work? What next?']].
          map(([n, title, d]) =>
          <div key={n} style={{ borderTop: `1px solid ${t.p.ink}`, paddingTop: 20 }}>
              <div style={{ marginBottom: 14 }}>
                <span style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, letterSpacing: '0.14em' }}>{n}</span>
              </div>
              <div style={{ fontFamily: t.fonts.serif, fontSize: 26, marginBottom: 8, lineHeight: 1.15 }}>{title}</div>
              <div style={{ fontSize: 14, lineHeight: 1.6, color: t.p.inkSoft }}>{d}</div>
            </div>
          )}
        </div>
      </section>

      {/* Two paths */}
      <section className="kt-section" style={{ background: t.p.paperDeep, borderBottom: `1px solid ${t.p.line}` }}>
        <Eyebrow t={t} style={{ marginBottom: 28 }}>04 · Two paths</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24 }}>
          <div style={{ padding: 32, border: `1px solid ${t.p.line}`, background: t.p.paper }}>
            <div style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, letterSpacing: '0.16em', marginBottom: 20 }}>GOING IT ALONE</div>
            {['12–24 month lease commitment', 'Six-figure fit-out costs', 'Buy or lease your own equipment', 'Source marketing, photography, branding'].map((x, i) =>
            <div key={i} style={{ fontSize: 15, padding: '8px 0', display: 'flex', gap: 14 }}>
                <span style={{ color: t.p.mute, fontFamily: t.fonts.mono, fontSize: 11 }}>0{i + 1}</span>
                <span>{x}</span>
              </div>
            )}
            <div style={{ borderTop: `1px solid ${t.p.line}`, marginTop: 22, paddingTop: 18, fontFamily: t.fonts.serif, fontSize: 26, color: t.p.mute, lineHeight: 1.2 }}>
              <span style={{ fontStyle: 'italic' }}>Significant capital</span> · months before you serve a single customer
            </div>
          </div>
          <div style={{ padding: 32, border: `2px solid ${t.p.accent}`, background: t.p.paper, position: 'relative' }}>
            <div style={{ position: 'absolute', top: -12, left: 24, background: t.p.accent, color: t.p.paper, padding: '4px 10px', fontFamily: t.fonts.mono, fontSize: 10, letterSpacing: '0.16em' }}>OUR OFFER</div>
            <div style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.accent, letterSpacing: '0.16em', marginBottom: 20 }}>WITH US</div>
            {['One month at a time — no long lock-in', 'Everything equipped, ready day one', 'Services bundled based on what you need', 'Walk out with data and a verdict'].map((x, i) =>
            <div key={i} style={{ fontSize: 15, padding: '8px 0', display: 'flex', gap: 14 }}>
                <span style={{ color: t.p.accent, fontFamily: t.fonts.mono, fontSize: 11 }}>0{i + 1}</span>
                <span>{x}</span>
              </div>
            )}
            <div style={{ borderTop: `1px solid ${t.p.line}`, marginTop: 22, paddingTop: 18, fontFamily: t.fonts.serif, fontSize: 26, color: t.p.accent, lineHeight: 1.2 }}>
              <span style={{ fontStyle: 'italic' }}>A fraction of the risk</span> · customers from week one
            </div>
          </div>
        </div>
        <div style={{ fontFamily: t.fonts.mono, fontSize: 10, color: t.p.mute, marginTop: 28, letterSpacing: '0.08em', textAlign: 'center' }}>
          // ACTUAL PRICING HELD UNTIL WE'VE TALKED TO ENOUGH OF YOU TO GET IT RIGHT
        </div>
      </section>

      {/* Survey */}
      <section id="register" className="kt-section-survey" style={{ background: dark ? t.p.ink : t.p.paper, color: dark ? t.p.paper : t.p.ink }}>
        <div style={{ maxWidth: 1040, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 60 }}>
            <Eyebrow t={t} color={dark ? t.p.mute : t.p.accent} style={{ marginBottom: 20 }}>05 · Register your interest</Eyebrow>
            <h2 className="kt-h2-survey" style={{ fontFamily: t.fonts.serif, letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0, fontWeight: 400 }}>
              Help us <span style={{ fontStyle: 'italic', color: t.p.accent }}>shape the program</span>.
            </h2>
            <p style={{ fontSize: 17, color: dark ? '#b8b3aa' : t.p.inkSoft, lineHeight: 1.6, marginTop: 22, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
              Six short sections. No commitment — just your honest take on what would make this actually useful. Early registrants get priority when slots open.
            </p>
          </div>
          <div className="kt-section-survey-inner" style={{ background: t.p.paper, color: t.p.ink, border: `1px solid ${dark ? t.p.ink : t.p.line}` }}>
            <Survey t={t} interestEndpoint={interestEndpoint} />
          </div>
          <div className="kt-footer" style={{ marginTop: 48, fontFamily: t.fonts.mono, fontSize: 10, color: dark ? t.p.mute : t.p.mute, letterSpacing: '0.14em' }}>
            <span>© 2026 KITCHEN TAKEOVERS</span>
            <span>SINGAPORE · HELLO@KITCHENTAKEOVERS.SG</span>
          </div>
        </div>
      </section>
    </div>);

}

Object.assign(window, { HiFiPage, PALETTES, FONT_PAIRS });