// ElevAI landing page components
const { useState, useEffect } = React;

// — Wordmark inline so theme can drive currentColor —
function Wordmark({ height = 22 }) {
  return (
    <span className="wordmark" aria-label="ElevAI">
      <svg viewBox="0 0 290 90" style={{ height }} fill="currentColor" aria-hidden="true">
        <text x="10" y="60" fontFamily="Geist, Inter, system-ui, sans-serif" fontWeight="500" fontSize="60" letterSpacing="-0.9">Elev</text>
        <rect x="153" y="42" width="2" height="18"></rect>
        <circle cx="154" cy="32" r="9"></circle>
        <text x="167" y="60" fontFamily="Geist, Inter, system-ui, sans-serif" fontWeight="500" fontSize="60" letterSpacing="-0.9">AI</text>
        <rect x="0" y="75" width="270" height="5"></rect>
      </svg>
    </span>
  );
}

function ArrowIcon({ size = 14 }) {
  return (
    <svg className="arrow" viewBox="0 0 14 14" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 11 L11 3" />
      <path d="M5 3 L11 3 L11 9" />
    </svg>
  );
}

// ============ HEADER ============
function ThemeToggle({ theme, onToggle }) {
  const isDark = theme === "dark";
  return (
    <button
      type="button"
      className="theme-toggle"
      role="switch"
      aria-checked={isDark}
      aria-label={isDark ? "Switch to light mode" : "Switch to night mode"}
      onClick={onToggle}
      title={isDark ? "Switch to light mode" : "Switch to night mode"}
    >
      <span className="tt-track">
        <span className="tt-thumb" data-pos={isDark ? "right" : "left"}>
          {isDark ? (
            <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">
              <path fill="currentColor" d="M11.5 9.7a4.2 4.2 0 0 1-5.2-5.2 4.2 4.2 0 1 0 5.2 5.2Z"/>
            </svg>
          ) : (
            <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
              <circle cx="8" cy="8" r="2.6" fill="currentColor" stroke="none"/>
              <path d="M8 1.6v1.4M8 13v1.4M1.6 8h1.4M13 8h1.4M3.5 3.5l1 1M11.5 11.5l1 1M3.5 12.5l1-1M11.5 4.5l1-1"/>
            </svg>
          )}
        </span>
      </span>
    </button>
  );
}

function Header({ theme, onToggleTheme }) {
  return (
    <header className="site-header">
      <div className="container">
        <nav className="nav">
          <div className="nav-left">
            <a href="#top" aria-label="ElevAI home">
              <Wordmark />
            </a>
          </div>
          <div className="nav-links">
            <a href="#services">Services</a>
            <a href="#process">Process</a>
            <a href="#faq">FAQ</a>
            <a href="#contact">Contact</a>
          </div>
          <div className="nav-right">
            <ThemeToggle theme={theme} onToggle={onToggleTheme} />
            <a href="#contact" className="btn btn-primary">
              Book a 15-min call
              <ArrowIcon />
            </a>
          </div>
        </nav>
      </div>
    </header>
  );
}

// ============ HERO ============
function Hero() {
  return (
    <section className="hero container" id="top">
      <div className="hero-grid">
        <div className="hero-text">
          <h1 className="display hero-display">
            Websites for businesses that{" "}
            <span className="accent-text">refuse to drown</span> in admin.
          </h1>
          <p className="body-lg hero-sub">
            ElevAI is a small studio that builds the website, booking flow, and
            quiet automations a local business actually needs. Trades, salons,
            cafés, independents — your hours, back.
          </p>
          <div className="hero-cta-row">
            <a href="#contact" className="btn btn-primary btn-lg">
              Start a project
              <ArrowIcon />
            </a>
            <a href="#process" className="btn btn-ghost btn-lg">
              See the process
            </a>
            <span className="pill" style={{ marginLeft: "auto" }}>
              <span className="dot" />
              2 slots open · May 2026
            </span>
          </div>
          <div className="hero-meta">
            <div className="hero-stat">
              <span className="hero-stat-num">2–3 wks</span>
              <span className="hero-stat-lbl">Typical build</span>
            </div>
            <div className="hero-stat-divider" />
            <div className="hero-stat">
              <span className="hero-stat-num">£0</span>
              <span className="hero-stat-lbl">Discovery call</span>
            </div>
            <div className="hero-stat-divider" />
            <div className="hero-stat">
              <span className="hero-stat-num">1 owner</span>
              <span className="hero-stat-lbl">Direct line, no PMs</span>
            </div>
          </div>
        </div>

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

function HeroMock() {
  return (
    <div className="hero-visual" aria-hidden="true">
      <div className="browser-bar">
        <div className="dots"><span /><span /><span /></div>
        <div className="url">optical-reminders.local</div>
        <div style={{ width: 28 }} />
      </div>
      <div className="mock-page">
        <div className="mock-tag">§ Optical practice · Yardley</div>
        <div className="mock-headline">
          No-shows down 60%,{" "}
          <span className="underline">no extra admin.</span>
        </div>
        <div className="mock-rule" />
        <div className="mock-grid">
          <div className="mock-card" />
          <div className="mock-card highlight" />
          <div className="mock-card" />
          <div className="mock-card" />
        </div>
        <div className="mock-row"><span className="num">09:30</span><span className="name">J. Patel</span><span className="status confirmed">Confirmed</span></div>
        <div style={{ height: 6 }} />
        <div className="mock-row"><span className="num">10:15</span><span className="name">S. Khan</span><span className="status pending">Pending</span></div>
        <div style={{ height: 6 }} />
        <div className="mock-row"><span className="num">11:00</span><span className="name">M. Jones</span><span className="status reminded">Reminded · 2h ago</span></div>
        <div className="mock-cta">
          Send 14 reminders · 2 mins <ArrowIcon size={11} />
        </div>
      </div>
    </div>
  );
}

// ============ SERVICES ============
const SERVICES = [
  {
    n: "01",
    title: "Websites that pull their weight",
    desc: "A site that loads fast, ranks locally, and turns visitors into bookings. Built on Next.js, hosted on a CDN, yours to keep.",
    items: ["Custom 4–8 page build", "Local SEO baseline", "Performance ≥ 95 lighthouse", "Copy & visual direction"],
  },
  {
    n: "02",
    title: "Bookings without the back-and-forth",
    desc: "Calendar, reminders, deposits, no-show protection. Plugged into your tools so you don't keep two systems in sync by hand.",
    items: ["Online booking page", "SMS / email reminders", "Stripe deposits", "Google Calendar sync"],
  },
  {
    n: "03",
    title: "Quiet automations that hand you back hours",
    desc: "The boring connective tissue: leads into your inbox, invoices into accounting, reviews into your homepage — running on its own.",
    items: ["Lead capture → CRM", "Invoice & receipt flows", "Review collection", "Reporting digest"],
  },
];

function Services() {
  return (
    <section className="section container" id="services">
      <div className="section-head">
        <div className="section-head-left">
          <span className="micro">§ 02 — Services</span>
          <h2 className="h2">Three things, done properly. Not a 60-item menu.</h2>
        </div>
        <div className="section-head-meta">
          <div>WORKING WITH</div>
          <div style={{ marginTop: 6 }}>TRADES · SALONS · STUDIOS · CAFÉS</div>
        </div>
      </div>
      <div className="services-grid">
        {SERVICES.map((s) => (
          <article className="service" key={s.n}>
            <div className="service-num">{s.n} / 03</div>
            <h3 className="h3 service-title">{s.title}</h3>
            <p className="body service-desc">{s.desc}</p>
            <ul className="service-list">
              {s.items.map((i) => <li key={i}>{i}</li>)}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============ PROCESS ============
const PROCESS = [
  {
    n: "01",
    title: "Discovery call",
    desc: "30 minutes. We talk through what you do, where the time goes, and what 'better' actually looks like. You leave with a written plan whether we work together or not.",
    timing: "Day 0",
    deliverable: "Written brief",
  },
  {
    n: "02",
    title: "Direction & quote",
    desc: "Within 48 hours we send a fixed quote, a clear scope, and a one-page visual direction. No hourly rates, no scope creep, no surprises on invoice day.",
    timing: "Day 1–2",
    deliverable: "Fixed quote + moodboard",
  },
  {
    n: "03",
    title: "Build",
    desc: "We build in the open. You get a live preview link from day one and a 15-minute check-in twice a week. Edits happen in the moment, not in a 40-comment doc.",
    timing: "Week 1–3",
    deliverable: "Live preview link",
  },
  {
    n: "04",
    title: "Ship & hand-over",
    desc: "Domain, hosting, analytics, training video, and a 30-day support window where small edits are on the house. After that, ongoing care is optional, never required.",
    timing: "Week 3+",
    deliverable: "Live site + handover pack",
  },
];

function Process() {
  return (
    <section className="section container" id="process">
      <div className="section-head">
        <div className="section-head-left">
          <span className="micro">§ 03 — Process</span>
          <h2 className="h2">Four steps. Roughly three weeks. No mystery.</h2>
        </div>
        <div className="section-head-meta">
          <div>FIXED PRICING</div>
          <div style={{ marginTop: 6 }}>NO RETAINERS BY DEFAULT</div>
        </div>
      </div>
      <div className="process-list">
        {PROCESS.map((p) => (
          <div className="process-step" key={p.n}>
            <div className="process-step-num">{p.n}</div>
            <h3 className="process-step-title">{p.title}</h3>
            <p className="process-step-desc">{p.desc}</p>
            <div className="process-step-meta">
              <strong>{p.timing}</strong>
              {p.deliverable}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ FAQ ============
const FAQS = [
  {
    q: "How much does a website cost?",
    a: "Most small-business sites land between £800 and £4,000, depending on scope. Discovery and a one-page brief are free, so you'll know the exact number before you commit. No \"from\" pricing tricks — what we quote is what you pay.",
  },
  {
    q: "How long does it take?",
    a: "Two to three weeks for a typical 4–8 page build, start to ship. Booking systems and automations add a few days each. We block one project per slot, so there's no queue behind you.",
  },
  {
    q: "Do I have to keep paying you forever?",
    a: "No. The build is a one-off — once it ships, the site is yours. The optional £35/mo covers hosting, your domain, and any small changes you want. Cancel any time on a month's notice and we hand everything over.",
  },
  {
    q: "What do you actually need from me?",
    a: "Less than you think. A 30-minute chat about what you want, the copy and photos for your pages (or we'll write them with you), and quick replies when we ask questions during the build. Domain, hosting, deployment, the boring stuff — we handle.",
  },
  {
    q: "What if I don't like the design?",
    a: "We share a first version within the first week, before we've gone too deep. You give feedback, we adjust. Two rounds of revisions are included in every build. If we're miles apart by round two, you've lost no money — discovery is free, builds aren't paid for upfront.",
  },
  {
    q: "Why 'AI' in the name?",
    a: "Because I use AI tools to ship faster than a traditional studio. That's how a small operation delivers in two weeks what an agency takes three months for, at a fraction of the cost. The taste, the decisions, and the judgment are mine. The acceleration is the AI's. You get both.",
  },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section container" id="faq">
      <div className="faq-grid">
        <div>
          <span className="micro">§ 04 — FAQ</span>
          <h2 className="h2" style={{ marginTop: 16 }}>Reasonable questions, asked often.</h2>
          <p className="body" style={{ marginTop: 24, maxWidth: "32ch" }}>
            Don't see yours here? Drop it in the form — we usually reply the
            same day.
          </p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className="faq-item" key={i} data-open={open === i ? "true" : "false"}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <span className="icon" aria-hidden="true" />
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT ============
const SERVICES_CHIPS = ["Website", "Bookings", "Automations", "Not sure yet"];
const BUDGET_CHIPS = ["Under £1.5k", "£1.5k–£3k", "£3k–£6k", "Let's talk"];

function Contact() {
  const [picked, setPicked] = useState(["Website"]);
  const [budget, setBudget] = useState("£1.5k–£3k");
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState(false);
  const [sending, setSending] = useState(false);

  const togglePick = (s) =>
    setPicked((p) => (p.includes(s) ? p.filter((x) => x !== s) : [...p, s]));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(false);
    setSending(true);
    try {
      const fd = new FormData(e.currentTarget);
      fd.append("access_key", "f81cfdb8-6349-4e82-931d-7b387593be4c");
      fd.append("services", picked.join(", "));
      fd.append("budget", budget);
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: fd,
      });
      if (!res.ok) throw new Error("send failed");
      setSubmitted(true);
    } catch (err) {
      setError(true);
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section container" id="contact">
      <div className="contact-card">
        <div className="contact-left">
          <span className="micro" style={{ marginBottom: 16, display: "block" }}>§ 05 — Start a project</span>
          <h2 className="h2">A 15-minute call, a written plan, no obligation.</h2>
          <p className="body-lg">
            Tell us a little about the business and what you're trying to fix.
            We'll come back inside one working day.
          </p>
          <div className="contact-detail">
            <div className="contact-detail-row">
              <span className="label">Email</span>
              <a className="value" href="mailto:hello@elevai.co.uk">hello@elevai.co.uk</a>
            </div>
            <div className="contact-detail-row">
              <span className="label">WhatsApp</span>
              <a className="value" href="https://wa.me/447479453807" target="_blank" rel="noopener">+44 7479 453807</a>
            </div>
            <div className="contact-detail-row">
              <span className="label">Hours</span>
              <span className="value">Mon–Fri · 09:00–18:00 GMT</span>
            </div>
            <div className="contact-detail-row">
              <span className="label">Based</span>
              <span className="value">Remote · Birmingham, UK</span>
            </div>
          </div>
        </div>

        <form
          className="form-grid"
          onSubmit={handleSubmit}
        >
          <div className="form-row">
            <div className="field">
              <label htmlFor="f-name">Your name</label>
              <input id="f-name" name="name" type="text" placeholder="Sam Miller" required />
            </div>
            <div className="field">
              <label htmlFor="f-biz">Business name</label>
              <input id="f-biz" name="business" type="text" placeholder="Miller's Barbers" required />
            </div>
          </div>
          <div className="form-row">
            <div className="field">
              <label htmlFor="f-email">Email</label>
              <input id="f-email" name="email" type="email" placeholder="sam@millersbarbers.co.uk" required />
            </div>
            <div className="field">
              <label htmlFor="f-phone">Phone (optional)</label>
              <input id="f-phone" name="phone" type="tel" placeholder="07000 000000" />
            </div>
          </div>
          <div className="field">
            <label>What do you need?</label>
            <div className="chip-group">
              {SERVICES_CHIPS.map((s) => (
                <button
                  type="button"
                  className="chip"
                  key={s}
                  aria-pressed={picked.includes(s)}
                  onClick={() => togglePick(s)}
                >{s}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>Rough budget</label>
            <div className="chip-group">
              {BUDGET_CHIPS.map((b) => (
                <button
                  type="button"
                  className="chip"
                  key={b}
                  aria-pressed={budget === b}
                  onClick={() => setBudget(b)}
                >{b}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label htmlFor="f-msg">Tell us a bit more</label>
            <textarea id="f-msg" name="message" placeholder="What does the business do, what's the problem, what would 'better' look like?" />
          </div>
          <div className="form-foot">
            <span>
              {submitted
                ? "✓ Thanks — we'll be in touch within one working day."
                : error
                ? "Something went wrong — email hello@elevai.co.uk instead."
                : "Replies within 1 working day"}
            </span>
            <button type="submit" className="btn btn-primary btn-lg" disabled={sending || submitted}>
              {submitted ? "Sent" : sending ? "Sending…" : "Send brief"}
              <ArrowIcon />
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}

// ============ COHORT BANNER ============
function CohortBanner() {
  return (
    <section className="container" style={{ paddingTop: 40, paddingBottom: 40 }}>
      <div className="cohort-banner">
        <div>
          <h2 className="h2">Opening cohort, May 2026.</h2>
          <p className="body" style={{ marginTop: 14 }}>
            We're taking on our first eight clients at a fixed introductory rate.
            Two slots remain.
          </p>
        </div>
        <a href="#contact" className="btn btn-primary btn-lg">
          Claim a slot
          <ArrowIcon />
        </a>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-col footer-brand">
            <Wordmark height={26} />
            <p className="body">
              A small studio in Birmingham building websites, booking systems and
              quiet automations for local businesses.
            </p>
          </div>
          <div className="footer-col">
            <h4>Studio</h4>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Elsewhere</h4>
            <ul>
              <li><a href="https://www.instagram.com/elevai.uk/" target="_blank" rel="noopener">Instagram · @elevai.uk</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Get in touch</h4>
            <ul>
              <li><a href="mailto:hello@elevai.co.uk">hello@elevai.co.uk</a></li>
              <li><a href="https://wa.me/447479453807" target="_blank" rel="noopener">WhatsApp · +44 7479 453807</a></li>
              <li>Remote · Birmingham, UK</li>
              <li>Mon–Fri · 09:00–18:00 GMT</li>
            </ul>
          </div>
        </div>

        <div className="footer-rule" />
        <div className="footer-mark" aria-hidden="true">
          <span>Elev</span>
          <span className="ai-dot">
            <span /><span className="stem" />
          </span>
          <span>AI</span>
        </div>

        <div className="footer-bottom">
          <span>© 2026 ElevAI · Birmingham, UK</span>
          <span>Built solo · Birmingham, UK</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Header, Hero, Services, Process, FAQ, Contact, CohortBanner, Footer,
});