/* App entry — composes the full Mica landing page */
const { useState, useEffect } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#FF6B3D", "#E73C7E", "#5B5EE8"],
  "headline": "your_crm_is_a_contact",
  "showPopia": true
}/*EDITMODE-END*/;

const PALETTES = [
  ["#FF6B3D", "#E73C7E", "#5B5EE8"], // brand default — coral / magenta / indigo
  ["#FF8A3D", "#F73C5C", "#A23CE7"], // warm — sunset to violet
  ["#3DD6FF", "#5B5EE8", "#E73CE7"], // cool — cyan to magenta
  ["#FFD93D", "#FF6B3D", "#E73C7E"], // gold to magenta
  ["#25D366", "#22A6B3", "#5B5EE8"], // whatsapp green ↦ indigo
];

const HEADLINES = {
  "your_crm_is_a_contact": { line1: "Your CRM", line2: ["is now a ", "contact."] },
  "stop_logging": { line1: "Stop logging.", line2: ["Start ", "selling."] },
  "actually_use": { line1: "The CRM your reps", line2: ["will actually ", "use."] },
  "no_data_entry": { line1: "Sales,", line2: ["without the ", "data entry."] },
};

const App = () => {
  const [t, setTweak] = useTweaks(TWEAKS_DEFAULTS);

  // Apply palette to CSS vars
  useEffect(() => {
    const root = document.documentElement;
    const [c1, c2, c3] = t.palette;
    root.style.setProperty('--coral', c1);
    root.style.setProperty('--magenta', c2);
    root.style.setProperty('--indigo', c3);
    root.style.setProperty('--grad', `linear-gradient(110deg, ${c1} 0%, ${c2} 50%, ${c3} 100%)`);
  }, [t.palette]);

  const headline = HEADLINES[t.headline] || HEADLINES["your_crm_is_a_contact"];

  return (
    <>
      <div className="ambient" aria-hidden></div>
      <Nav />
      <main>
        <Hero headline={headline} />
        <Problem />
        <Fix />
        <Workflow />
        <UnderHood />
        <Pricing />
        <Faq />
        <CtaStrip />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor
            label="Gradient palette"
            value={t.palette}
            options={PALETTES}
            onChange={(v) => setTweak('palette', v)}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Headline"
            value={t.headline}
            options={[
              { value: "your_crm_is_a_contact", label: "Your CRM is now a contact." },
              { value: "stop_logging", label: "Stop logging. Start selling." },
              { value: "actually_use", label: "The CRM your reps will actually use." },
              { value: "no_data_entry", label: "Sales, without the data entry." },
            ]}
            onChange={(v) => setTweak('headline', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

// Override hero to use tweaked headline
const _OriginalHero = window.Hero;
window.Hero = ({ headline }) => {
  const scrollTo = (id) => () => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  const h = headline || { line1: "Your CRM", line2: ["is now a ", "contact."] };
  return (
    <section className="hero" id="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>AI-NATIVE CRM · WHATSAPP-FIRST</div>
            <h1>
              {h.line1}<br/>{h.line2[0]}<span className="accent">{h.line2[1]}</span>
            </h1>
            <p className="hero-sub">
              Mica is the CRM your reps already use, because it lives in WhatsApp.
              Voice notes become deals. Business cards become contacts. The data-entry tax disappears.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary btn-lg" href="https://app.meetmica.com/login">
                Get Started <Icon name="arrow-right" size={16}/>
              </a>
              <button className="btn btn-secondary btn-lg" onClick={scrollTo('workflow')}>
                <Icon name="whatsapp" size={16}/> See it in WhatsApp
              </button>
            </div>
            <div className="hero-meta">
              <span className="pill"><span className="dot"></span>WhatsApp Business API · Verified</span>
              <span>POPIA · GDPR</span>
            </div>
          </div>
          <div className="hero-phone-wrap">
            <div className="hero-glow"></div>
            <ChatThread script={HERO_SCRIPT} loop={true} startDelay={500} />
          </div>
        </div>
      </div>
    </section>
  );
};

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