/* ReplyFirst site — app shell + Tweaks wiring */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FFD400",
  "headlineFont": "Anton",
  "heroLayout": "split",
  "liveCall": true,
  "copy": "default"
}/*EDITMODE-END*/;

const ACCENTS = {
  "#FFD400": { hover: "#EABB00", name: "Hazard Yellow" },
  "#FF7A00": { hover: "#E66A00", name: "Safety Orange" },
  "#B6F500": { hover: "#9FD800", name: "Hi-Vis Lime" },
  "#FF3B1F": { hover: "#E22E14", name: "Dispatch Red" },
};

const FONTS = {
  "Anton":            { stack: "'Anton', sans-serif", weight: 400 },
  "Bebas Neue":       { stack: "'Bebas Neue', sans-serif", weight: 400 },
  "Oswald":           { stack: "'Oswald', sans-serif", weight: 700 },
  "Archivo Black":    { stack: "'Archivo Black', sans-serif", weight: 400 },
  "Barlow Condensed": { stack: "'Barlow Condensed', sans-serif", weight: 800 },
};

const COPY = {
  "default": { h1: "Answer first.", h2: "Win more jobs.", sub: "The 24/7 AI receptionist built for BC trades. It answers the calls you’d miss, books the job, and texts the urgent ones to your phone in seconds.", cta1: "Test the AI receptionist" },
  "missed":  { h1: "Missed calls.", h2: "Missed jobs.", sub: "A missed call is a customer dialing your competitor. ReplyFirst answers 24/7, books the job, and sends the hot ones straight to your phone.", cta1: "Start capturing calls" },
  "never":   { h1: "Never miss", h2: "the job.", sub: "Voicemail loses jobs. ReplyFirst answers every call you miss, qualifies it, and routes the urgent ones to you in seconds. Live in days, no contract.", cta1: "Hear the demo" },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = React.useState(false);
  const [playing, setPlaying] = React.useState(false);
  const openCall = () => setModal(true);

  React.useEffect(() => {
    const root = document.documentElement;
    const acc = ACCENTS[t.accent] || ACCENTS["#FFD400"];
    root.style.setProperty('--yellow', t.accent);
    root.style.setProperty('--yellow-hover', acc.hover);
    root.style.setProperty('--accent', t.accent);
    const f = FONTS[t.headlineFont] || FONTS["Anton"];
    root.style.setProperty('--font-headline', f.stack);
    root.style.setProperty('--display-weight', f.weight);
  }, [t.accent, t.headlineFont]);

  return (
    <React.Fragment>
      <Header onCTA={openCall} />
      <Hero onCTA={openCall} animate={t.liveCall} layout={t.heroLayout} copy={COPY[t.copy] || COPY.default} />
      <WhyMissedCalls />
      <HowItWorks />
      <Calculator onCTA={openCall} />
      <Demo playing={playing} onToggle={() => setPlaying(p => !p)} />
      <PhonePocket />
      <FieldBand />
      <Industries />
      <Compare />
      <StatStrip />
      <Pricing onCTA={openCall} />
      <FAQ />
      <FinalCTA onCTA={openCall} />
      <Footer />
      <CallModal open={modal} onClose={() => setModal(false)} />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={Object.keys(ACCENTS)}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSelect label="Headline font" value={t.headlineFont}
          options={Object.keys(FONTS)}
          onChange={(v) => setTweak('headlineFont', v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.heroLayout}
          options={['split', 'mirror', 'center']}
          onChange={(v) => setTweak('heroLayout', v)} />
        <TweakSelect label="Headline copy" value={t.copy}
          options={['default', 'missed', 'never']}
          onChange={(v) => setTweak('copy', v)} />
        <TweakToggle label="Live call animation" value={t.liveCall}
          onChange={(v) => setTweak('liveCall', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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