/* App composition — Pronto */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#0d9488",
  "heroVariant": "demo",
  "density": "default",
  "headline": "default"
}/*EDITMODE-END*/;

const HEADLINES = {
  default: <>Every missed call is a lead <em>you're handing away.</em> <span className="lime">We text them back.</span></>,
  speed:   <>They called. You missed it. <em>We texted them back.</em> <span className="lime">In 18 seconds.</span></>,
  human:   <>Your phone can't always be answered. <em>Your leads shouldn't pay for that.</em></>,
  bold:    <>Your voicemail is <span className="strike">costing you clients.</span> <span className="lime">Fix it.</span></>,
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [booking, setBooking] = useState(false);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-density", tweaks.density);
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    const ink = pickInk(tweaks.accent);
    document.documentElement.style.setProperty("--accent-ink", ink);
  }, [tweaks]);

  function openBooking() { setBooking(true); }

  return (
    <div className="page">
      <Nav onBook={openBooking}/>
      <Hero variant={tweaks.heroVariant} headline={tweaks.headline} onBook={openBooking}/>
      <Marquee/>
      <ProblemSection/>
      <HowItWorks/>
      <Features/>
      <Founder/>
      <CTA onBook={openBooking}/>
      <Footer/>

      {booking && <BookingModal onClose={() => setBooking(false)}/>}

      <Tweaks tweaks={tweaks} setTweak={setTweak}/>
    </div>
  );
}

function pickInk(hex) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!m) return "#1a1814";
  const [r, g, b] = [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)];
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return lum > 0.55 ? "#1a1814" : "#ffffff";
}

function Nav({ onBook }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a className="brand" href="#">
          <span className="brand-mark">
            {/* Phone handset + reply arrow: missed call → text back */}
            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 4.2C3.3 3.2 4.3 2.9 5.2 3.4L6.3 4.3 5.6 5.8C6 6.6 6.7 7.3 7.5 7.7l1.4-.8 1 1.1C10.4 9 10.1 10 9.2 10.3 7.5 11 3.5 8 3 4.2z"
                    stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" fill="none"/>
              <path d="M9.5 1.5 L9.5 5.5 M7.8 3.2 L9.5 1.5 L11.2 3.2"
                    stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
          Pronto
        </a>
        <div className="nav-links">
          <a href="#problem">The problem</a>
          <a href="#how">How it works</a>
          <a href="#features">Product</a>
          <a href="#about">About</a>
        </div>
        <button className="nav-cta" onClick={onBook}>
          Get early access <span className="arrow">→</span>
        </button>
      </div>
    </nav>
  );
}

function Hero({ variant, headline, onBook }) {
  const h = HEADLINES[headline] || HEADLINES.default;
  return (
    <header className="hero">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow">
            <span className="dot"/>MISSED CALL TEXT-BACK · EARLY ACCESS
          </div>
          <h1>{h}</h1>
          <p className="hero-sub">
            Pronto watches your business phone line. The moment a call goes unanswered,
            it fires a personalized SMS to the caller — keeping them engaged until you're ready
            to follow up. That's the whole product, for now.
          </p>
          <div className="hero-cta-row">
            <button className="btn btn-primary" onClick={onBook}>
              Get early access <span className="arrow">→</span>
            </button>
            <a className="btn btn-ghost" href="#problem">Why this matters</a>
          </div>
          <div className="hero-meta">
            <div>
              <div className="num">&lt;60<span style={{ color: "var(--ink-dim)", fontSize: "0.45em" }}>s</span></div>
              <div className="lbl">Text sent after missed call</div>
            </div>
            <div>
              <div className="num">47<span style={{ color: "var(--ink-dim)", fontSize: "0.55em" }}>hr</span></div>
              <div className="lbl">Avg competitor response</div>
            </div>
            <div>
              <div className="num">24/7</div>
              <div className="lbl">Always watching</div>
            </div>
          </div>
        </div>

        <div>
          {variant === "demo" && <HeroDemo/>}
          {variant === "type" && <HeroType/>}
        </div>
      </div>
    </header>
  );
}

function Tweaks({ tweaks, setTweak }) {
  const accents = ["#0d9488", "#2563EB", "#7c3aed", "#059669", "#dc2626", "#d97706"];
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          options={[{ label: "Dark", value: "dark" }, { label: "Light", value: "light" }]}
          onChange={v => setTweak("theme", v)}
        />
        <div style={{ marginTop: 12 }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-dim)", letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 8 }}>Accent</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {accents.map(c => (
              <button key={c} onClick={() => setTweak("accent", c)}
                style={{
                  width: 28, height: 28, borderRadius: 8, background: c,
                  border: tweaks.accent === c ? "2px solid var(--ink)" : "1px solid var(--line)",
                  cursor: "pointer"
                }} aria-label={c}/>
            ))}
          </div>
        </div>
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio
          label="Variant"
          value={tweaks.heroVariant}
          options={[{ label: "Live demo", value: "demo" }, { label: "Typographic", value: "type" }]}
          onChange={v => setTweak("heroVariant", v)}
        />
        <TweakSelect
          label="Headline"
          value={tweaks.headline}
          options={[
            { label: "Default — We text them back", value: "default" },
            { label: "Speed — 18 seconds", value: "speed" },
            { label: "Human — Your leads shouldn't pay", value: "human" },
            { label: "Bold — Your voicemail is costing you", value: "bold" },
          ]}
          onChange={v => setTweak("headline", v)}
        />
      </TweakSection>

      <TweakSection title="Density">
        <TweakRadio
          label="Spacing"
          value={tweaks.density}
          options={[
            { label: "Compact", value: "compact" },
            { label: "Default", value: "default" },
            { label: "Spacious", value: "spacious" },
          ]}
          onChange={v => setTweak("density", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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