/* Landing page components — React */
const { useState, useEffect, useRef } = React;

function HowItWorksStrip() {
  const steps = [
    {
      n: "01",
      title: "Upload your list",
      body: "Drop in an Excel or CSV. We handle messy phone formats, duplicates, and timezones.",
      illo: (
        <svg viewBox="0 0 140 84" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="28" y="14" width="84" height="56" rx="6" fill="var(--bg-alt)" stroke="var(--border-strong)" />
          <path d="M28 30 H112 M50 30 V70 M78 30 V70" stroke="var(--border-strong)" />
          <rect x="30" y="16" width="80" height="12" fill="var(--accent-soft)" stroke="none" />
          <circle cx="70" cy="50" r="14" fill="var(--surface)" stroke="var(--accent)" strokeWidth="1.5" />
          <path d="M70 44 V56 M64 50 L70 44 L76 50" stroke="var(--accent)" />
        </svg>
      )
    },
    {
      n: "02",
      title: "Write your goal",
      body: "One prompt. Describe who's calling, what you need, and when to schedule a callback.",
      illo: (
        <svg viewBox="0 0 140 84" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="20" y="18" width="100" height="48" rx="8" fill="var(--surface)" stroke="var(--border-strong)" />
          <path d="M30 34 H94 M30 44 H86 M30 54 H70" stroke="var(--accent)" strokeWidth="2" />
          <circle cx="110" cy="60" r="10" fill="var(--accent)" stroke="none" />
          <path d="M106 60 L110 64 L116 58" stroke="var(--accent-contrast)" strokeWidth="2" />
        </svg>
      )
    },
    {
      n: "03",
      title: "Get results",
      body: "Watch calls happen live. Export a finished spreadsheet with statuses, transcripts, and outcomes.",
      illo: (
        <svg viewBox="0 0 140 84" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="22" y="16" width="96" height="52" rx="6" fill="var(--bg-alt)" stroke="var(--border-strong)" />
          <circle cx="38" cy="32" r="4" fill="var(--status-reached)" stroke="none" />
          <path d="M46 32 H96" stroke="var(--border-strong)" />
          <circle cx="38" cy="46" r="4" fill="var(--status-callback)" stroke="none" />
          <path d="M46 46 H88" stroke="var(--border-strong)" />
          <circle cx="38" cy="60" r="4" fill="var(--status-voicemail)" stroke="none" />
          <path d="M46 60 H80" stroke="var(--border-strong)" />
        </svg>
      )
    }
  ];
  return (
    <div className="how-strip">
      {steps.map((s, i) => (
        <div key={i} className="how-card">
          <div className="how-illo">{s.illo}</div>
          <div className="how-num mono">{s.n}</div>
          <h3>{s.title}</h3>
          <p>{s.body}</p>
        </div>
      ))}
    </div>
  );
}

function FeatureGrid() {
  const features = [
    {
      title: "AI voice calls",
      body: "Natural-sounding voices in 32 languages. Sub-800ms latency, no awkward pauses.",
      icon: (p) => (
        <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
        </svg>
      )
    },
    {
      title: "Voicemail detection",
      body: "We know when a human picked up vs. a machine. No more leaving pitches to answering bots.",
      icon: (p) => (
        <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="6" cy="14" r="4"/><circle cx="18" cy="14" r="4"/><path d="M6 14h12"/>
        </svg>
      )
    },
    {
      title: "Smart retries",
      body: "Didn't pick up? We'll try again at better times—configurable cadence per campaign.",
      icon: (p) => (
        <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12a9 9 0 1 1-3.8-7.35"/><polyline points="21 3 21 9 15 9"/>
        </svg>
      )
    },
    {
      title: "Callback scheduling",
      body: "When someone asks for a better time, the agent books it—in their timezone, respecting your hours.",
      icon: (p) => (
        <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><circle cx="16" cy="16" r="2"/>
        </svg>
      )
    },
    {
      title: "Live transcripts",
      body: "See every conversation as it happens. Search, tag, and jump to the moment that matters.",
      icon: (p) => (
        <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="7" y1="9" x2="17" y2="9"/><line x1="7" y1="13" x2="13" y2="13"/>
        </svg>
      )
    },
    {
      title: "Excel export",
      body: "One click. Get back a spreadsheet with statuses, durations, outcomes, and full transcripts.",
      icon: (p) => (
        <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
        </svg>
      )
    }
  ];
  return (
    <div className="feature-grid">
      {features.map((f, i) => {
        const Icon = f.icon;
        return (
          <div key={i} className="feature-card">
            <div className="feature-icon"><Icon width="22" height="22" /></div>
            <h3>{f.title}</h3>
            <p>{f.body}</p>
          </div>
        );
      })}
    </div>
  );
}

function UseCases() {
  const cases = [
    {
      tag: "Sales outreach",
      count: "~180s avg call",
      prompt: "Hi, I'm Ava from Northwind. I'm reaching out because your team just hit 50 engineers. I'd love 15 minutes to show how we've cut onboarding time for similar teams. Book a slot if it's useful, otherwise no worries.",
      stats: [{ label: "Contact rate", v: "34%" }, { label: "Demo booked", v: "1 in 7" }]
    },
    {
      tag: "Appointment booking",
      count: "~90s avg call",
      prompt: "Hi, calling from Bright Dental. You're due for a cleaning — I can book you Tuesday at 2pm or Thursday at 10am. Which works?",
      stats: [{ label: "Booked", v: "62%" }, { label: "Rescheduled", v: "18%" }]
    },
    {
      tag: "Payment reminders",
      count: "~60s avg call",
      prompt: "Hi, this is a courtesy reminder from Ribera & Co. Your March invoice for €1,240 is 8 days overdue. Can we confirm a payment date, or would you like to speak with accounts?",
      stats: [{ label: "Paid within 7d", v: "71%" }, { label: "Promise-to-pay", v: "22%" }]
    }
  ];
  const [active, setActive] = useState(0);
  const c = cases[active];

  return (
    <div className="usecases">
      <div className="usecases-tabs">
        {cases.map((u, i) => (
          <button
            key={i}
            className={`usecases-tab ${i === active ? "active" : ""}`}
            onClick={() => setActive(i)}
          >
            <span className="mono" style={{ fontSize: 11, color: "var(--text-subtle)", marginRight: 10 }}>0{i + 1}</span>
            {u.tag}
          </button>
        ))}
      </div>
      <div className="usecases-body">
        <div className="usecases-prompt">
          <div className="usecases-prompt-head">
            <span className="mono" style={{ fontSize: 11, color: "var(--text-subtle)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Sample prompt</span>
            <span style={{ fontSize: 11, color: "var(--text-muted)" }}>{c.count}</span>
          </div>
          <p key={active}>{c.prompt}</p>
          <div className="usecases-stats">
            {c.stats.map((s, i) => (
              <div key={i} className="usecases-stat">
                <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: "var(--text)", fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>{s.v}</div>
                <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function FAQ() {
  const qs = [
    {
      q: "How natural does the AI sound?",
      a: "Very. Under 800ms response time, natural interruptions, and 32 voice options. Most people on the other end can't tell — we require AI disclosure in the opening line anyway."
    },
    {
      q: "What happens when it reaches voicemail?",
      a: "Ringlist detects it automatically. You choose: leave a recorded message, leave a dynamically-generated one, or hang up and retry later. Default is a short 15-second custom message."
    },
    {
      q: "Which countries can I call?",
      a: "130+ countries with local caller ID in 40. Per-minute rates vary by destination — see the pricing page for full list. EU and North America are our most common."
    },
    {
      q: "Is this GDPR-compliant?",
      a: "Yes. Full EU data residency, DPA available, recordings auto-deleted on your schedule. We also require AI-disclosure at call start to comply with EU AI Act."
    },
    {
      q: "How accurate is lead matching from Excel?",
      a: "We handle messy data: phone numbers in any format, duplicate detection, timezone inference from area codes, name parsing. If a row is unusable, we'll flag it before you start paying for calls."
    },
    {
      q: "Can I use my own phone number?",
      a: "Bring your own Twilio, SignalWire, or Telnyx account — or use ours with local caller IDs in 40 countries. Number porting is supported on paid plans."
    },
    {
      q: "What does a typical minute cost?",
      a: "€0.15 per minute for most EU/US destinations. Top up any amount from €10. No subscription, no seats, no commitment. Pricing page has the full breakdown."
    },
    {
      q: "Can I hear a sample call?",
      a: "Yes — every new account gets 5 free test minutes to call yourself and tune the prompt. No credit card required to try."
    }
  ];
  const [open, setOpen] = useState(null);
  return (
    <div className="faq">
      {qs.map((q, i) => (
        <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? null : i)} aria-expanded={open === i}>
            <span>{q.q}</span>
            <span className="faq-plus" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
          </button>
          <div className="faq-a"><div>{q.a}</div></div>
        </div>
      ))}
    </div>
  );
}

function Trust() {
  const items = [
    { tag: "GDPR", body: "Fully compliant. DPA on request." },
    { tag: "EU data residency", body: "Servers in Frankfurt & Dublin." },
    { tag: "AI disclosure", body: "Built into every call opening." },
    { tag: "SOC 2", body: "Type II, audited annually." }
  ];
  return (
    <div className="trust">
      {items.map((it, i) => (
        <div key={i} className="trust-item">
          <div className="trust-check">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          </div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text)" }}>{it.tag}</div>
            <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 2 }}>{it.body}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container hero-inner">
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="eyebrow-dot"></span>
            AI voice agents · Pay per minute
          </div>
          <h1>Upload a list.<br/><span className="hero-accent">We call them.</span></h1>
          <p className="hero-sub">
            Ringlist is an AI voice platform that turns a spreadsheet of contacts into completed calls. Upload. Prompt. Export results. No dialers, no scripts, no seats.
          </p>
          <div className="hero-ctas">
            <a href="signup.html" className="btn btn-primary btn-lg">
              Start free
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <button className="btn btn-ghost btn-lg" onClick={() => alert("Demo video would play here")}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
              Watch 60s demo
            </button>
          </div>
          <div className="hero-meta">
            <span>5 free test minutes</span>
            <span className="hero-meta-dot"></span>
            <span>No credit card</span>
            <span className="hero-meta-dot"></span>
            <span>€10 minimum top-up</span>
          </div>
        </div>
      </div>
      <div className="container hero-visual-wrap">
        <div className="hero-visual">
          <Dashboard />
        </div>
      </div>
    </section>
  );
}

function App() {
  useEffect(() => {
    window.Ringlist.renderNav('home');
    window.Ringlist.renderFooter();
  }, []);

  return (
    <>
      <header id="nav" className="nav"></header>
      <main>
        <Hero />

        <section className="section" id="how">
          <div className="container">
            <div className="section-head">
              <div className="eyebrow" style={{ marginBottom: 14 }}>How it works</div>
              <h2>Three steps. Then the calls happen.</h2>
              <p>No scripts to maintain, no agents to train, no dialers to configure. From CSV to conversations in under ten minutes.</p>
            </div>
            <HowItWorksStrip />
          </div>
        </section>

        <section className="section" id="features" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head">
              <div className="eyebrow" style={{ marginBottom: 14 }}>Features</div>
              <h2>Everything your outbound needs.</h2>
              <p>The boring parts — retries, voicemail, scheduling, compliance — handled. The important parts — tone, pacing, goals — controllable with one prompt.</p>
            </div>
            <FeatureGrid />
          </div>
        </section>

        <section className="section" id="usecases" style={{ background: "var(--bg-alt)", paddingTop: 96, paddingBottom: 96 }}>
          <div className="container">
            <div className="section-head">
              <div className="eyebrow" style={{ marginBottom: 14 }}>Use cases</div>
              <h2>Works for any list of phone numbers.</h2>
              <p>Same engine, different prompts. Here are three of the most common — and the actual prompts that run them.</p>
            </div>
            <UseCases />
          </div>
        </section>

        <section className="section" style={{ paddingTop: 96, paddingBottom: 40 }}>
          <div className="container">
            <div className="pricing-teaser">
              <div>
                <div className="eyebrow" style={{ marginBottom: 14 }}>Pricing</div>
                <h2 style={{ marginBottom: 12 }}>Pay only for minutes used.</h2>
                <p style={{ color: "var(--text-muted)", fontSize: 18, maxWidth: 560 }}>
                  Top up €10 to start. No seats, no subscriptions, no commitments. Most calls run under €0.30.
                </p>
                <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <a href="pricing.html" className="btn btn-primary btn-lg">See full pricing</a>
                  <a href="signup.html" className="btn btn-ghost btn-lg">Start free</a>
                </div>
              </div>
              <div className="pricing-teaser-card">
                <div style={{ fontSize: 12, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500 }}>Per minute</div>
                <div className="pricing-teaser-price">
                  <span className="mono">€0.15</span>
                </div>
                <div style={{ borderTop: "1px solid var(--border)", paddingTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
                  {[
                    "Unlimited campaigns",
                    "All 32 voice options",
                    "Excel & CSV export",
                    "Live transcripts",
                    "No seat fees, ever"
                  ].map((t, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                      <span style={{ color: "var(--text-muted)" }}>{t}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 40, paddingBottom: 96 }}>
          <div className="container">
            <Trust />
          </div>
        </section>

        <section className="section" id="faq" style={{ paddingTop: 40, paddingBottom: 96 }}>
          <div className="container faq-container">
            <div className="section-head" style={{ textAlign: "center", margin: "0 auto 56px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>FAQ</div>
              <h2>Questions, answered.</h2>
            </div>
            <FAQ />
          </div>
        </section>

        <section className="section cta" style={{ paddingTop: 40, paddingBottom: 96 }}>
          <div className="container">
            <div className="cta-card">
              <h2>Start with 5 free minutes.</h2>
              <p>No credit card. Call yourself to test the voice. Scale up when you're ready.</p>
              <a href="signup.html" className="btn btn-primary btn-lg">
                Start free
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
            </div>
          </div>
        </section>
      </main>
      <footer id="footer" className="footer"></footer>
    </>
  );
}

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