// Premura landing page — main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVisual": "transcript",
  "headline": "calm",
  "showCallout": true
}/*EDITMODE-END*/;

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

  // Override headline by tweak
  const headlines = {
    calm:    { lead: "The front desk that ", em: "never", tail: " misses a call." },
    bold:    { lead: "Stop losing patients to ", em: "voicemail", tail: "." },
    warm:    { lead: "A receptionist your patients ", em: "actually", tail: " want to talk to." },
  };
  const h = headlines[tweaks.headline] || headlines.calm;

  // Patch the Hero title via DOM if needed — simpler: pass props.
  return (
    <>
      <Nav />
      <HeroWithHeadline variant={tweaks.heroVisual} headline={h} showCallout={tweaks.showCallout} />
      <Problem />
      <Customize />
      <HowItWorks />
      <CTABand />
      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio
          label="Headline"
          value={tweaks.headline}
          onChange={(v) => setTweak('headline', v)}
          options={[
            { value: 'calm', label: 'Calm' },
            { value: 'bold', label: 'Bold' },
            { value: 'warm', label: 'Warm' },
          ]}
        />
        <TweakSelect
          label="Visual"
          value={tweaks.heroVisual}
          onChange={(v) => setTweak('heroVisual', v)}
          options={[
            { value: 'transcript', label: 'Live transcript' },
            { value: 'log',        label: 'Calls log' },
            { value: 'orbit',      label: 'Orbit / brand' },
          ]}
        />
        <TweakToggle
          label="Design-partner callout"
          value={tweaks.showCallout}
          onChange={(v) => setTweak('showCallout', v)}
        />
      </TweaksPanel>
    </>
  );
}

// Hero shim that injects headline + callout from tweaks
function HeroWithHeadline({ variant, headline, showCallout }) {
  const Visual = variant === "log" ? HeroCallsLog
              : variant === "orbit" ? HeroOrbit
              : HeroTranscript;
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          {showCallout && (
            <div className="eyebrow-row">
              <span className="dot"></span>
              <span>Now onboarding design partners</span>
            </div>
          )}

          <h1 className="hero-title">
            {headline.lead}<span className="serif">{headline.em}</span>{headline.tail}
          </h1>

          <p className="hero-sub">
            Premura is an AI receptionist for dental practices. It answers every call,
            books appointments straight into your schedule, and hands off the ones
            that need a human.
          </p>

          <div id="waitlist">
            <Waitlist />
          </div>

          <div className="waitlist-meta">
            <span className="check">
              <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 10.5 8 14l8-9"/>
              </svg>
              Built for dental practices
            </span>
            <span className="check">
              <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 10.5 8 14l8-9"/>
              </svg>
              No call volume commitment
            </span>
          </div>
        </div>

        <div>
          <Visual />
        </div>
      </div>
    </section>
  );
}

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