/* app.jsx — composer + Tweaks panel */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "productName": "Care",
  "typePair": "Noto Sans",
  "palette": "Blush & Cream",
  "showCounter": true,
  "density": "Comfortable",
  "heroAccent": "Italic"
}/*EDITMODE-END*/;

const TYPE_PAIRS = {
  'Noto Sans':                { head: "'Noto Sans', system-ui, sans-serif", body: "'Noto Sans', system-ui, sans-serif" },
  'Fraunces + Inter':         { head: "'Fraunces', Georgia, serif",         body: "'Inter', system-ui, sans-serif" },
  'Instrument Serif + DM Sans': { head: "'Instrument Serif', Georgia, serif", body: "'DM Sans', system-ui, sans-serif" },
  'Domine + Inter':           { head: "'Domine', Georgia, serif",           body: "'Inter', system-ui, sans-serif" },
  'Cormorant + Geist':        { head: "'Cormorant', Georgia, serif",        body: "'Geist', system-ui, sans-serif" },
};

const PALETTES = {
  'Blush & Cream': {
    cream: '#F0E9E2', cream2: '#E4D8CF', paper: '#F9F3EC',
    ink: '#3A2E2E', inkSoft: '#62534F', navy: '#3A2E2E',
    terracotta: '#9C6469', terraDeep: '#7E4D52', terraSoft: '#E3C6C4',
  },
  'Sage & Linen': {
    cream: '#ECE7DB', cream2: '#DFD8C6', paper: '#F6F2E8',
    ink: '#2F3A2E', inkSoft: '#56594C', navy: '#2F3A2E',
    terracotta: '#5C7853', terraDeep: '#44603E', terraSoft: '#C5D0B4',
  },
  'Harbor & Sand': {
    cream: '#EBE6DC', cream2: '#DAD4C5', paper: '#F5F0E6',
    ink: '#2C353E', inkSoft: '#545A60', navy: '#2C353E',
    terracotta: '#547893', terraDeep: '#426074', terraSoft: '#B9C9D5',
  },
  'Oat + Forest': {
    cream: '#ECE5D8', cream2: '#DCD3BF', paper: '#F6F1E6',
    ink: '#2C2A22', inkSoft: '#5A5448', navy: '#2C2A22',
    terracotta: '#4C6E45', terraDeep: '#3A5636', terraSoft: '#C4CFB0',
  },
  'Cream + Navy + Terracotta': {
    cream: '#F4EDE1', cream2: '#EAE0CB', paper: '#FBF6EA',
    ink: '#16243F', inkSoft: '#324868', navy: '#193b68',
    terracotta: '#D4845C', terraDeep: '#B86B45', terraSoft: '#E9B89C',
  },
  'Bone + Ink + Clay': {
    cream: '#EFEAE0', cream2: '#E0D8C8', paper: '#F7F2E7',
    ink: '#1B1A1A', inkSoft: '#4A463E', navy: '#1B1A1A',
    terracotta: '#C66E45', terraDeep: '#A85530', terraSoft: '#E3B59A',
  },
  'Sage + Charcoal + Apricot': {
    cream: '#EBE9DC', cream2: '#D9D9C2', paper: '#F4F2E5',
    ink: '#1F2A24', inkSoft: '#4D5852', navy: '#1F2A24',
    terracotta: '#D08458', terraDeep: '#A56237', terraSoft: '#EFBC93',
  },
  'Powder + Ink + Plum': {
    cream: '#F1ECE6', cream2: '#E1D7CC', paper: '#FBF6EF',
    ink: '#1A1626', inkSoft: '#42384F', navy: '#1A1626',
    terracotta: '#A04A6E', terraDeep: '#7D3556', terraSoft: '#D9A0B5',
  },
};

const DENSITY = {
  'Compact':      { maxw: '1180px', pad: 'clamp(18px, 3vw, 40px)', secY: 'clamp(56px, 7vh, 96px)' },
  'Comfortable':  { maxw: '1240px', pad: 'clamp(20px, 4vw, 56px)', secY: 'clamp(64px, 10vh, 120px)' },
  'Spacious':     { maxw: '1280px', pad: 'clamp(24px, 5vw, 72px)', secY: 'clamp(80px, 12vh, 140px)' },
};

function applyTokens(t) {
  const root = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES['Cream + Navy + Terracotta'];
  const f = TYPE_PAIRS[t.typePair] || TYPE_PAIRS['Fraunces + Inter'];
  const d = DENSITY[t.density] || DENSITY['Comfortable'];

  root.style.setProperty('--cream', p.cream);
  root.style.setProperty('--cream-2', p.cream2);
  root.style.setProperty('--paper', p.paper);
  root.style.setProperty('--ink', p.ink);
  root.style.setProperty('--ink-soft', p.inkSoft);
  root.style.setProperty('--navy', p.navy);
  root.style.setProperty('--terracotta', p.terracotta);
  root.style.setProperty('--terracotta-deep', p.terraDeep);
  root.style.setProperty('--terracotta-soft', p.terraSoft);

  root.style.setProperty('--font-head', f.head);
  root.style.setProperty('--font-body', f.body);

  root.style.setProperty('--maxw', d.maxw);
  root.style.setProperty('--pad', d.pad);
  document.querySelectorAll('section').forEach(s => {
    s.style.paddingTop = d.secY;
    s.style.paddingBottom = d.secY;
  });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [prefill, setPrefill] = React.useState(null);
  const [selectedUseCase, setSelectedUseCase] = React.useState(null);
  const [selectedTier, setSelectedTier] = React.useState(null);
  const [familyOpen, setFamilyOpen] = React.useState(false);

  React.useEffect(() => { applyTokens(t); }, [t.typePair, t.palette, t.density]);

  const scrollToSurvey = (data) => {
    setPrefill((cur) => ({ ...(cur || {}), ...(data || {}) }));
    const el = document.getElementById('survey');
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };

  return (
    <React.Fragment>
      <Nav productName={t.productName} />
      <HeroSection productName={t.productName} showCounter={t.showCounter} />
      <ProblemSection />
      <DifferenceSection />
      <UseCasesSection
        selected={selectedUseCase}
        setSelected={setSelectedUseCase}
        scrollToSurvey={(uc) => scrollToSurvey({ useCase: uc.id })}
      />
      <HowItWorksSection productName={t.productName} />
      <WhyTrustSection productName={t.productName} />
      <PrivacySection productName={t.productName} />
      <TestimonialsSection />
      <PricingSection
        productName={t.productName}
        selectedTier={selectedTier}
        setSelectedTier={setSelectedTier}
        scrollToSurvey={scrollToSurvey}
      />
      <PersonasSection
        productName={t.productName}
        openFamilyModal={() => setFamilyOpen(true)}
      />
      <SurveySection
        productName={t.productName}
        prefill={prefill}
        onPrefillConsumed={() => setPrefill(null)}
      />
      <FAQSection productName={t.productName} />
      <FooterSection productName={t.productName} />
      <StickyCTA productName={t.productName} />
      {familyOpen && <FamilyModal onClose={() => setFamilyOpen(false)} productName={t.productName} />}

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakSelect
          label="Product name"
          value={t.productName}
          options={['Care', 'Clarity', 'Quiet', 'Lume', 'Kindly']}
          onChange={(v) => setTweak('productName', v)}
        />
        <TweakToggle
          label="Waitlist counter"
          value={t.showCounter}
          onChange={(v) => setTweak('showCounter', v)}
        />

        <TweakSection label="Type pairing" />
        <TweakSelect
          label="Heading + body"
          value={t.typePair}
          options={Object.keys(TYPE_PAIRS)}
          onChange={(v) => setTweak('typePair', v)}
        />

        <TweakSection label="Palette" />
        <TweakSelect
          label="Color system"
          value={t.palette}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak('palette', v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['Compact', 'Comfortable', 'Spacious']}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Demo" />
        <TweakButton
          label="Reset all selections"
          onClick={() => { setPrefill(null); setSelectedUseCase(null); setSelectedTier(null); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);