/* Tweaks for receptionist.html — three expressive controls */

const PERSONAS = {
  neighborhood: {
    eyebrow: 'PRODUCT 01 / RECEPTIONIST',
    h1a: 'Every call',
    h1b: 'answered.',
    h1c: '24/7. In 20+ languages.',
    lede: 'An AI voice receptionist for restaurants, hotels, salons, and service businesses. Handles reservations, answers questions, routes calls, and never puts anyone on hold.',
    meta1: '0.4 SEC AVERAGE PICKUP',
    meta2: 'NO HOLD MUSIC',
    meta3: 'HUMAN HANDOFF · ALWAYS',
    sampleLabel: 'A REAL CALL · TRIMMED',
    h2a: '"Hi, can I get a',
    h2b: 'table for four,',
    h2c: 'Tuesday around 7?"',
    sub: 'Receptionist hears the request, checks the calendar, holds the table, confirms by SMS, and logs it to your POS. 38 seconds. No human touched it.',
    t: [
      'Hi, do you have a table for four, this Tuesday around seven?',
      ['Let me check — ', 'Tuesday at 7', ' we have a window at 6:45 or 7:30. Which works better?'],
      'Seven-thirty is great.',
      'Booked. Can I grab a name and number for the confirmation text?',
      "Marcus — same number I'm calling from.",
      ['All set, Marcus. Tuesday, 7:30, party of four. Text on its way. ', 'See you then.', ''],
    ],
  },
  concierge: {
    eyebrow: 'PRODUCT 01 / THE CONCIERGE',
    h1a: 'Always picked up.',
    h1b: 'Always composed.',
    h1c: 'A voice that belongs to the brand.',
    lede: 'A concierge-grade voice agent for boutique hotels, fine dining, and members-only clubs. Speaks softly, reads the room, books the room.',
    meta1: 'WHITE-GLOVE TONE',
    meta2: 'SOMMELIER-CALM',
    meta3: 'NEVER PUTS A GUEST ON HOLD',
    sampleLabel: 'A REAL CALL · UNEDITED',
    h2a: '"Good evening — do you have a',
    h2b: 'quiet table for four,',
    h2c: 'Tuesday around seven?"',
    sub: 'Receptionist listens, consults the floor plan, holds the corner banquette, sends a confirmation with the chef\'s tasting menu attached. 41 seconds. No human touched it.',
    t: [
      'Good evening — would you have a quiet table for four, this Tuesday at seven?',
      ['Of course. ', 'Tuesday at seven', ' we can offer the corner banquette at 6:45, or the window two-top at 7:30. Which would you prefer?'],
      'Seven-thirty by the window — perfect.',
      'Beautifully done. May I take a name and a mobile for the confirmation message?',
      'Marcus — the number I\'m on now is fine.',
      ['Booked, Mr. Marcus — Tuesday, half past seven, party of four. Confirmation sent. ', 'A pleasure.', ''],
    ],
  },
  snappy: {
    eyebrow: 'PRODUCT 01 / RECEPTIONIST',
    h1a: 'Phone rings →',
    h1b: 'booked.',
    h1c: 'Under half a second. Twenty languages.',
    lede: 'A no-nonsense AI receptionist for restaurants, dispatchers, clinics, and trades. Picks up fast, answers tight, transfers when it should. No filler.',
    meta1: '0.3 SEC PICKUP',
    meta2: 'NO SMALL TALK',
    meta3: 'TRANSFER IN 1 RING',
    sampleLabel: 'A REAL CALL · 38 SEC',
    h2a: '"Table for four,',
    h2b: 'Tuesday,',
    h2c: 'around seven?"',
    sub: 'Hears it. Books it. Texts the confirm. POS updated. 38 seconds, done. No human in the loop.',
    t: [
      'Table for four, Tuesday, around seven?',
      ['Got it. ', 'Tuesday 7', ' — 6:45 or 7:30. Pick one.'],
      'Seven-thirty.',
      'Name and number for the text?',
      "Marcus — this number's fine.",
      ['Done. Tuesday 7:30, four guests. Text incoming. ', 'See you.', ''],
    ],
  },
};

const PALETTES = {
  signal:    { blue: '#3a6dff', blue2: '#6a8cff', tint: 'rgba(58,109,255,0.12)', tint2: 'rgba(58,109,255,0.06)', soft: 'rgba(106,140,255,0.3)' },
  saffron:   { blue: '#e8a83a', blue2: '#ffc66a', tint: 'rgba(232,168,58,0.14)', tint2: 'rgba(232,168,58,0.07)', soft: 'rgba(255,198,106,0.3)' },
  sage:      { blue: '#5fa68a', blue2: '#9bc5b2', tint: 'rgba(95,166,138,0.14)', tint2: 'rgba(95,166,138,0.07)', soft: 'rgba(155,197,178,0.3)' },
  coral:     { blue: '#e87359', blue2: '#ff9a82', tint: 'rgba(232,115,89,0.14)', tint2: 'rgba(232,115,89,0.07)', soft: 'rgba(255,154,130,0.3)' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "persona": "neighborhood",
  "palette": "signal",
  "atmosphere": "calm"
}/*EDITMODE-END*/;

function applyPalette(key) {
  const p = PALETTES[key] || PALETTES.signal;
  const r = document.documentElement.style;
  r.setProperty('--blue', p.blue);
  r.setProperty('--blue-2', p.blue2);
  r.setProperty('--blue-tint', p.tint);
}

function applyPersona(key) {
  const p = PERSONAS[key] || PERSONAS.neighborhood;
  const $ = (id) => document.getElementById(id);
  if ($('rx-eyebrow')) $('rx-eyebrow').innerHTML = '<span class="dot"></span>' + p.eyebrow;
  if ($('rx-h1')) $('rx-h1').innerHTML = `${p.h1a} <em class="s">${p.h1b}</em><br>${p.h1c}`;
  if ($('rx-lede')) $('rx-lede').textContent = p.lede;
  if ($('rx-m1')) $('rx-m1').innerHTML = `<span class="pulse"></span>${p.meta1}`;
  if ($('rx-m2')) $('rx-m2').textContent = p.meta2;
  if ($('rx-m3')) $('rx-m3').textContent = p.meta3;
  if ($('rx-sample-label')) $('rx-sample-label').textContent = p.sampleLabel;
  if ($('rx-h2')) $('rx-h2').innerHTML = `${p.h2a} <em class="s">${p.h2b}</em> ${p.h2c}`;
  if ($('rx-sub')) $('rx-sub').textContent = p.sub;
  // Transcript turns
  const turns = p.t;
  const setSaid = (id, val) => {
    const el = $(id);
    if (!el) return;
    if (Array.isArray(val)) el.innerHTML = `${val[0]}<em>${val[1]}</em>${val[2]}`;
    else el.textContent = val;
  };
  setSaid('t1', turns[0]);
  setSaid('t2', turns[1]);
  setSaid('t3', turns[2]);
  setSaid('t4', turns[3]);
  setSaid('t5', turns[4]);
  setSaid('t6', turns[5]);
}

function applyAtmosphere(key) {
  document.body.setAttribute('data-atmo', key);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyPersona(t.persona); }, [t.persona]);
  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyAtmosphere(t.atmosphere); }, [t.atmosphere]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Voice persona">
        <TweakRadio label="Tone" value={t.persona}
          options={[
            { value: 'neighborhood', label: 'Local' },
            { value: 'concierge',    label: 'Suite' },
            { value: 'snappy',       label: 'Snap' },
          ]}
          onChange={(v) => setTweak('persona', v)} />
      </TweakSection>
      <TweakSection label="Accent palette">
        <TweakColor label="Color" value={t.palette}
          options={[
            { value: 'signal',  label: 'Signal' },
            { value: 'saffron', label: 'Saffron' },
            { value: 'sage',    label: 'Sage' },
            { value: 'coral',   label: 'Coral' },
          ].map((o) => o.value)}
          onChange={(v) => setTweak('palette', v)} />
      </TweakSection>
      <TweakSection label="Atmosphere">
        <TweakRadio label="Hero" value={t.atmosphere}
          options={[
            { value: 'calm',  label: 'Calm' },
            { value: 'pulse', label: 'Pulse' },
            { value: 'vivid', label: 'Vivid' },
          ]}
          onChange={(v) => setTweak('atmosphere', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// TweakColor expects hex strings/arrays. Override the palette options with actual hex previews.
const __origTweakColor = window.TweakColor;
window.TweakColor = function PaletteSwatchPicker({ label, value, options, onChange }) {
  const PALMAP = {
    signal:  ['#3a6dff', '#6a8cff'],
    saffron: ['#e8a83a', '#ffc66a'],
    sage:    ['#5fa68a', '#9bc5b2'],
    coral:   ['#e87359', '#ff9a82'],
  };
  return (
    <TweakRow label={label}>
      <div className="twk-chips" role="radiogroup">
        {options.map((k) => {
          const colors = PALMAP[k] || ['#888'];
          const on = k === value;
          return (
            <button key={k} type="button" className="twk-chip" role="radio"
              aria-checked={on} data-on={on ? '1' : '0'}
              style={{ background: colors[0] }}
              onClick={() => onChange(k)}>
              <span><i style={{ background: colors[1] }} /></span>
            </button>
          );
        })}
      </div>
    </TweakRow>
  );
};

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);