// Call Hero — website (single long page)
// Warm + friendly, mascot-led, SMB audience.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "heroHeadline": "Never miss another call.",
  "heroSub": "Call Hero is your AI receptionist — answering, booking, and following up 24/7 so you can focus on the work that matters.",
  "mascot": "featured",
  "primaryCta": "Try it free for 14 days"
}/*EDITMODE-END*/;

const C = {
  ink: "#0E1116",
  paper: "#FAF7F2",
  cream: "#F1ECE0",
  coral: "#FF5B3A",
  coralDark: "#E64A2A",
  muted: "#6E6A62",
  line: "rgba(14,17,22,0.08)",
};

/* ================================ MARK ================================ */
function Mark({ size = 56 }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} style={{ display: "block", flexShrink: 0 }}>
      <rect width="100" height="100" rx="22" fill={C.ink}/>
      <g transform="rotate(-6 50 32)">
        <path d="M28 32 Q 50 14 72 32 L68 38 Q 50 24 32 38 Z" fill={C.coral}/>
        <circle cx="24" cy="34" r="9" fill={C.coral}/>
        <circle cx="24" cy="34" r="4.5" fill={C.ink} opacity="0.18"/>
        <circle cx="76" cy="34" r="9" fill={C.coral}/>
        <circle cx="76" cy="34" r="4.5" fill={C.ink} opacity="0.18"/>
      </g>
      <path d="M14 50 Q 14 44 20 44 L80 44 Q 86 50 86 56 L86 84 Q 86 90 80 90 L20 90 Q 14 90 14 84 Z" fill={C.coral}/>
      <rect x="20" y="42" width="6" height="4" rx="1" fill={C.coral}/>
      <rect x="74" y="42" width="6" height="4" rx="1" fill={C.coral}/>
      <line x1="50" y1="54" x2="50" y2="50" stroke={C.ink} strokeWidth="1.4" strokeLinecap="round"/>
      <circle cx="50" cy="49" r="1.6" fill={C.cream}/>
      <rect x="36" y="56" width="28" height="22" rx="5" fill={C.ink}/>
      <circle cx="44" cy="66" r="2.6" fill={C.cream}/>
      <circle cx="56" cy="66" r="2.6" fill={C.cream}/>
      <circle cx="44.8" cy="65.2" r="0.7" fill={C.cream}/>
      <circle cx="56.8" cy="65.2" r="0.7" fill={C.cream}/>
      <path d="M44 71.5 Q 50 75 56 71.5" stroke={C.cream} strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      <circle cx="34" cy="67" r="1.6" fill={C.ink}/>
      <circle cx="66" cy="67" r="1.6" fill={C.ink}/>
      <rect x="42" y="82" width="16" height="3" rx="1.5" fill={C.ink} opacity="0.55"/>
    </svg>
  );
}

function Lockup({ markSize = 44, wordSize = 18, color }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <Mark size={markSize}/>
      <span style={{
        fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: wordSize,
        letterSpacing: "-0.03em", color: color || C.ink, lineHeight: 1
      }}>
        Call<span style={{ color: C.coral }}>Hero</span>
      </span>
    </div>
  );
}

/* ================================ NAV ================================ */
function Nav({ tweaks }) {
  const fg = tweaks.theme === "dark" ? C.paper : C.ink;
  return (
    <div className="nav">
      <Lockup markSize={40} wordSize={20} color={fg}/>
      <div className="nav-links" style={{ color: fg }}>
        <a href="#how">How it works</a>
        <a href="#features">Features</a>
        <a href="#industries">Industries</a>
        <a href="#pricing">Pricing</a>
      </div>
      <div className="nav-cta">
        <a href="https://dashboard-weld-nine-96.vercel.app" className="btn btn-ghost" style={{ color: fg, borderColor: fg }}>Sign in</a>
        <a href="https://dashboard-weld-nine-96.vercel.app/onboarding" className="btn btn-coral">Get started</a>
      </div>
    </div>
  );
}

/* =============================== HERO ================================ */
function Hero({ tweaks }) {
  return (
    <section className="hero">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="dot"/> AI Receptionist · Always on
          </div>
          <h1 className="display">
            {tweaks.heroHeadline.split(" ").map((w, i) =>
              <span key={i}>{w} </span>
            )}
          </h1>
          <p className="lede">{tweaks.heroSub}</p>
          <div className="hero-ctas">
            <a href="https://dashboard-weld-nine-96.vercel.app/onboarding" className="btn btn-coral btn-lg">{tweaks.primaryCta}</a>
            <a href="#demo" className="btn btn-ghost-dark btn-lg">▶ Hear a real call</a>
          </div>
          <div className="hero-meta">
            <span>★★★★★ 4.9 on G2</span>
            <span className="sep">·</span>
            <span>SOC 2 Type II</span>
            <span className="sep">·</span>
            <span>Setup in 6 minutes</span>
          </div>
        </div>

        <div className="hero-stage">
          <MascotScene tweaks={tweaks}/>
        </div>
      </div>
    </section>
  );
}

function MascotScene({ tweaks }) {
  return (
    <div className="mascot-scene">
      {/* big mark on coral */}
      <div className="mascot-card">
        <div className="mascot-card-tag">LIVE · ANSWERING</div>
        <Mark size={220}/>
        <div className="ring ring-1"/>
        <div className="ring ring-2"/>
        <div className="ring ring-3"/>
      </div>

      {/* floating transcript bubble */}
      <div className="bubble bubble-1">
        <div className="bubble-meta">Sarah · New caller</div>
        <div className="bubble-text">"Hi, I'd like to book a 4pm appointment..."</div>
      </div>
      <div className="bubble bubble-2">
        <div className="bubble-meta">CallHero</div>
        <div className="bubble-text">"Of course — Tuesday at 4pm with Dr. Lin. Confirmed ✓"</div>
      </div>
    </div>
  );
}

/* =========================== TRUSTED BY ============================== */
function TrustBar() {
  const names = ["Bright Smiles Dental", "Anchor & Oak Salon", "Greenline Plumbing", "Northstar Vet", "Maple Law Group", "Coastal HVAC"];
  return (
    <section className="trust">
      <div className="trust-label">Trusted by 2,400+ small businesses</div>
      <div className="trust-row">
        {names.map(n => <span key={n} className="trust-logo">{n}</span>)}
      </div>
    </section>
  );
}

/* ============================= HOW IT WORKS ========================== */
function HowItWorks() {
  const steps = [
    { n: "01", t: "Plug in your number", d: "Forward unanswered calls to Call Hero. Setup takes about 6 minutes — no IT required." },
    { n: "02", t: "Train your hero", d: "Tell us your hours, services, and FAQs in plain English. We'll build a custom voice for your business." },
    { n: "03", t: "Wake up to bookings", d: "Calls answered, appointments booked, follow-ups sent. You get a tidy summary every morning." },
  ];
  return (
    <section id="how" className="section">
      <SectionHead eyebrow="HOW IT WORKS" title="From missed call to booked customer in three steps."/>
      <div className="steps">
        {steps.map(s => (
          <div key={s.n} className="step">
            <div className="step-num">{s.n}</div>
            <div className="step-title">{s.t}</div>
            <div className="step-desc">{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================== FEATURES ============================= */
function Features() {
  const items = [
    { t: "24/7 answering", d: "Never miss a call again — including nights, weekends, and your busiest lunch rush.", icon: "phone" },
    { t: "Real bookings", d: "Two-way calendar sync with Google, Outlook, Calendly, Jobber, and 30+ tools.", icon: "calendar" },
    { t: "Sounds human", d: "Natural conversation, not a phone tree. Customers don't need to know it's AI.", icon: "wave" },
    { t: "Multilingual", d: "English, Spanish, French, Mandarin, and 18 more — switches automatically.", icon: "globe" },
    { t: "Intelligent routing", d: "Urgent calls reach a real human. Spam and robocalls? Filtered out.", icon: "route" },
    { t: "Full transcripts", d: "Every call recorded, summarized, and searchable. Daily digest by email or SMS.", icon: "doc" },
  ];
  return (
    <section id="features" className="section">
      <SectionHead eyebrow="FEATURES" title="Everything a great receptionist does. Without ever calling in sick."/>
      <div className="features-grid">
        {items.map(i => (
          <div key={i.t} className="feature">
            <div className="feature-icon"><FeatureIcon name={i.icon}/></div>
            <div className="feature-title">{i.t}</div>
            <div className="feature-desc">{i.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FeatureIcon({ name }) {
  const stroke = C.ink;
  const c = C.coral;
  const s = { stroke, strokeWidth: 1.8, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "phone": return <svg viewBox="0 0 32 32" width="28" height="28"><path d="M8 6 L14 6 L16 12 L13 14 Q 16 20 18 21 L20 18 L26 20 L26 26 Q 14 26 8 14 Z" {...s} fill={c} fillOpacity="0.15"/></svg>;
    case "calendar": return <svg viewBox="0 0 32 32" width="28" height="28"><rect x="6" y="9" width="20" height="17" rx="2" {...s} fill={c} fillOpacity="0.15"/><path d="M6 14 L26 14 M11 6 L11 11 M21 6 L21 11" {...s}/></svg>;
    case "wave": return <svg viewBox="0 0 32 32" width="28" height="28"><path d="M5 16 L9 16 M11 11 L11 21 M15 7 L15 25 M19 11 L19 21 M23 14 L23 18 M27 16 L27 16" {...s} stroke={c}/></svg>;
    case "globe": return <svg viewBox="0 0 32 32" width="28" height="28"><circle cx="16" cy="16" r="10" {...s}/><path d="M6 16 L26 16 M16 6 Q 22 16 16 26 M16 6 Q 10 16 16 26" {...s}/></svg>;
    case "route": return <svg viewBox="0 0 32 32" width="28" height="28"><circle cx="8" cy="8" r="3" {...s} fill={c} fillOpacity="0.2"/><circle cx="24" cy="24" r="3" {...s} fill={c} fillOpacity="0.2"/><path d="M8 11 Q 8 24 24 21" {...s}/></svg>;
    case "doc": return <svg viewBox="0 0 32 32" width="28" height="28"><path d="M9 5 L21 5 L25 9 L25 27 L9 27 Z" {...s} fill={c} fillOpacity="0.15"/><path d="M13 13 L21 13 M13 17 L21 17 M13 21 L18 21" {...s}/></svg>;
  }
  return null;
}

/* ============================= LIVE DEMO ============================= */
function LiveDemo() {
  return (
    <section id="demo" className="section section-dark">
      <SectionHead light eyebrow="LIVE CALL" title="A real call, answered in 4 seconds flat."/>
      <div className="demo-frame">
        <div className="demo-side">
          <div className="demo-meta">
            <div className="demo-mark"><Mark size={44}/></div>
            <div>
              <div className="demo-biz">Bright Smiles Dental</div>
              <div className="demo-num">+1 (415) 555-0193 · 11:42 AM</div>
            </div>
            <div className="demo-status">● Live</div>
          </div>
          <div className="demo-waveform">
            {Array.from({ length: 48 }, (_, i) => {
              const h = 6 + Math.abs(Math.sin(i * 0.7)) * 32 + (i % 5) * 2;
              return <span key={i} style={{ height: h }}/>;
            })}
          </div>
          <div className="demo-time">00:24 / 01:18</div>
        </div>
        <div className="demo-transcript">
          <div className="demo-line"><b>Caller</b><br/>Hi, my crown popped off this morning, can you fit me in today?</div>
          <div className="demo-line demo-line-bot"><b>CallHero</b><br/>I'm so sorry that happened — I can absolutely help. We have an emergency slot at 1:30 with Dr. Lin. Should I lock that in?</div>
          <div className="demo-line"><b>Caller</b><br/>Yes please.</div>
          <div className="demo-line demo-line-bot"><b>CallHero</b><br/>Booked. You'll get a text confirmation. Anything else I can do, Marcus?</div>
        </div>
      </div>
    </section>
  );
}

/* ============================= INDUSTRIES ============================ */
function Industries() {
  const list = [
    { t: "Dental & medical", d: "HIPAA-aware, insurance-savvy, books recall visits." },
    { t: "Salons & spas", d: "Knows your stylists, services, and Saturday rush." },
    { t: "Home services", d: "Plumbers, HVAC, electricians — books truck rolls fast." },
    { t: "Legal", d: "Intake-trained, conflict-of-interest aware, summarizes the case." },
    { t: "Veterinary", d: "Triages emergencies, schedules vaccinations, refills." },
    { t: "Real estate", d: "Qualifies leads, schedules tours, syncs with your CRM." },
  ];
  return (
    <section id="industries" className="section">
      <SectionHead eyebrow="INDUSTRIES" title="Trained for the way your business actually works."/>
      <div className="ind-grid">
        {list.map(i => (
          <div key={i.t} className="ind-card">
            <div className="ind-num">→</div>
            <div className="ind-title">{i.t}</div>
            <div className="ind-desc">{i.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* =============================== PRICING ============================= */
function Pricing() {
  const tiers = [
    { name: "Starter", price: "$79", per: "/mo", desc: "For solo operators and side businesses.", feats: ["100 calls / month", "Voicemail + SMS follow-up", "Calendar sync", "Email digest"], cta: "Start free" },
    { name: "Pro", price: "$199", per: "/mo", desc: "Most popular — for growing teams.", feats: ["500 calls / month", "Live call transfers", "CRM integrations (30+)", "Multilingual", "Custom voice training"], cta: "Start free", featured: true },
    { name: "Scale", price: "Talk to us", per: "", desc: "Multi-location and call volume > 1,500/mo.", feats: ["Unlimited calls", "Dedicated number pool", "SOC 2 + DPA", "Priority support"], cta: "Book a demo" },
  ];
  return (
    <section id="pricing" className="section">
      <SectionHead eyebrow="PRICING" title="Pays for itself the first week."/>
      <div className="price-grid">
        {tiers.map(t => (
          <div key={t.name} className={"price " + (t.featured ? "price-featured" : "")}>
            {t.featured && <div className="price-badge">Most popular</div>}
            <div className="price-name">{t.name}</div>
            <div className="price-num"><span>{t.price}</span><em>{t.per}</em></div>
            <div className="price-desc">{t.desc}</div>
            <ul className="price-feats">
              {t.feats.map(f => <li key={f}>✓ {f}</li>)}
            </ul>
            <a href="https://dashboard-weld-nine-96.vercel.app/onboarding" className={"btn " + (t.featured ? "btn-coral" : "btn-ghost-dark")}>{t.cta}</a>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================= TESTIMONIALS ========================== */
function Testimonials() {
  const items = [
    { q: "We were missing 30% of our calls during lunch. Call Hero books them now while we're with patients.", a: "Dr. Priya Lin", r: "Owner · Bright Smiles Dental" },
    { q: "The voice is so warm I had a regular thank me for hiring 'such a sweet new receptionist.'", a: "Maya Okafor", r: "Owner · Anchor & Oak Salon" },
    { q: "Setup took ten minutes. By the next morning we'd booked four after-hours service calls.", a: "Tom Reyes", r: "Owner · Greenline Plumbing" },
  ];
  return (
    <section className="section section-cream">
      <SectionHead eyebrow="STORIES" title="Owners who finally got their evenings back."/>
      <div className="testimonials">
        {items.map((t, i) => (
          <div key={i} className="t-card">
            <div className="t-quote">"{t.q}"</div>
            <div className="t-author">{t.a}<span>{t.r}</span></div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ================================= FAQ =============================== */
function FAQ() {
  const qs = [
    { q: "Will my customers know it's AI?", a: "Most don't notice. We're transparent if asked, and you can configure how Call Hero introduces itself." },
    { q: "What if a call needs a real human?", a: "Calls flagged as urgent or out-of-scope are routed to your team instantly via SMS, app, or live transfer." },
    { q: "How fast can I get set up?", a: "Most accounts are answering calls within 15 minutes. Custom voice training takes about 24 hours." },
    { q: "Is my data secure?", a: "Yes. We're SOC 2 Type II, HIPAA-compatible on Pro+, and never train shared models on your customer data." },
  ];
  return (
    <section className="section">
      <SectionHead eyebrow="FAQ" title="The short version."/>
      <div className="faq">
        {qs.map((it, i) => (
          <details key={i} className="faq-item">
            <summary>{it.q}<span className="faq-plus">+</span></summary>
            <div className="faq-a">{it.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

/* ============================ FOOTER CTA ============================= */
function FooterCTA({ tweaks }) {
  return (
    <section id="cta" className="cta">
      <div className="cta-inner">
        <Mark size={120}/>
        <h2 className="cta-headline">Hire your hero today.</h2>
        <p className="cta-sub">14-day free trial. No credit card. Cancel any time.</p>
        <div className="cta-form">
          <input placeholder="you@business.com"/>
          <button className="btn btn-coral btn-lg" onClick={() => window.location.href='https://dashboard-weld-nine-96.vercel.app/onboarding'}>{tweaks.primaryCta}</button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <Lockup markSize={36} wordSize={16} color={C.paper}/>
        <div className="footer-cols">
          <div>
            <div className="foot-h">Product</div>
            <a href="#">Features</a>
            <a href="#">Pricing</a>
            <a href="#">Integrations</a>
            <a href="#">Changelog</a>
          </div>
          <div>
            <div className="foot-h">Company</div>
            <a href="#">About</a>
            <a href="#">Customers</a>
            <a href="#">Careers</a>
            <a href="#">Press</a>
          </div>
          <div>
            <div className="foot-h">Resources</div>
            <a href="#">Help center</a>
            <a href="#">API docs</a>
            <a href="#">Status</a>
            <a href="#">Contact</a>
          </div>
          <div>
            <div className="foot-h">Legal</div>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Security</a>
            <a href="#">DPA</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Call Hero, Inc.</span>
        <span>Made for businesses that hate missing calls.</span>
      </div>
    </footer>
  );
}

/* ============================= UTILITIES ============================= */
function SectionHead({ eyebrow, title, light }) {
  return (
    <div className={"section-head " + (light ? "section-head-light" : "")}>
      <div className="eyebrow"><span className="dot"/>{eyebrow}</div>
      <h2 className="section-title">{title}</h2>
    </div>
  );
}

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

  // Apply theme on document
  React.useEffect(() => {
    document.body.classList.toggle("theme-dark", tweaks.theme === "dark");
    document.body.classList.toggle("theme-coral", tweaks.theme === "coral");
    document.body.classList.toggle("theme-light", tweaks.theme === "light");
    document.body.classList.toggle("mascot-min", tweaks.mascot === "minimal");
    document.body.classList.toggle("mascot-feat", tweaks.mascot === "featured");
    document.body.classList.toggle("mascot-everywhere", tweaks.mascot === "everywhere");
  }, [tweaks.theme, tweaks.mascot]);

  return (
    <>
      <Nav tweaks={tweaks}/>
      <Hero tweaks={tweaks}/>
      <TrustBar/>
      <HowItWorks/>
      <Features/>
      <LiveDemo/>
      <Industries/>
      <Pricing/>
      <Testimonials/>
      <FAQ/>
      <FooterCTA tweaks={tweaks}/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio label="Theme" value={tweaks.theme} onChange={v => setTweak("theme", v)}
            options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }, { value: "coral", label: "Coral" }]}/>
        </TweakSection>
        <TweakSection title="Mascot">
          <TweakRadio label="Prominence" value={tweaks.mascot} onChange={v => setTweak("mascot", v)}
            options={[{ value: "minimal", label: "Minimal" }, { value: "featured", label: "Featured" }, { value: "everywhere", label: "Everywhere" }]}/>
        </TweakSection>
        <TweakSection title="Hero copy">
          <TweakText label="Headline" value={tweaks.heroHeadline} onChange={v => setTweak("heroHeadline", v)}/>
          <TweakText label="Sub-headline" value={tweaks.heroSub} onChange={v => setTweak("heroSub", v)}/>
          <TweakText label="Primary CTA" value={tweaks.primaryCta} onChange={v => setTweak("primaryCta", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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