// Achieve - interactive landing app
const { useState, useEffect, useRef, useMemo } = React;

// ===== Icons =====
const Icon = {
  arrow: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>),
  check: (p) => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" {...p}><polyline points="20 6 9 17 4 12"/></svg>),
  send: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12L20 5l-3 15-5-7-7-1z"/></svg>),
  plus: (p) => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M12 5v14M5 12h14"/></svg>),
  phone: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><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-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 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-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>),
  mail: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7L12 14 2 7"/></svg>),
  ig: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>),
  spark: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4"/></svg>),
  bot: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><rect x="3" y="7" width="18" height="13" rx="3"/><path d="M12 7V3M9 12h.01M15 12h.01M9 17h6"/></svg>),
  flow: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7 6h10M6 8l5 8M18 8l-5 8"/></svg>),
  inbox: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>),
  globe: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20"/></svg>),
  star: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>),
  search: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>),
  rocket: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>),
};

// ===== Nav =====
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="logo">
          <span className="logo-mark">A</span>
          <span>achieve<em>.</em></span>
        </a>
        <div className="nav-links">
          <a href="#services">Services</a>
          <a href="#how">How it works</a>
          <a href="#demo">Demo</a>
          <a href="#pricing">Plan</a>
          <a href="#faq">FAQ</a>
        </div>
        <a className="nav-cta" href="#contact">Book a free audit <Icon.arrow /></a>
      </div>
    </nav>
  );
}

// ===== Hero =====
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-grid"></div>
      <div className="hero-glow"></div>
      <div className="wrap">
        <div className="hero-inner">
          <span className="eyebrow"><span className="dot"></span>Marketing for pool companies</span>
          <h1>Revive your pool company to be <em>greater than it ever was</em>.</h1>
          <p className="hero-sub">
            We work exclusively in the pool industry. We know exactly where the leads are leaking, why quotes go cold, and why your calendar isn't as full as it should be — because we've seen it in every pool company we've worked with. We've mapped the bottlenecks, built the systems to fix them, and we do nothing else.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#contact">Book a free audit <Icon.arrow /></a>
            <a className="btn btn-ghost" href="#demo">See it in action</a>
          </div>
          <dl className="hero-meta">
            <div>
              <dt>Missed inbound calls</dt>
              <dd><em>30–40%</em> industry avg</dd>
            </div>
            <div>
              <dt>Avg pool install value</dt>
              <dd>$50k–$150k+</dd>
            </div>
            <div>
              <dt>Season demand window</dt>
              <dd><em>6 weeks</em> spring + fall</dd>
            </div>
            <div>
              <dt>Setup time</dt>
              <dd>2–3 weeks</dd>
            </div>
          </dl>
        </div>
      </div>
    </section>
  );
}

// ===== Services =====
const SERVICE_CARDS = [
  { icon: <Icon.phone />, name: "AI Voice Receptionist", desc: "24/7 voice agent that answers every call, qualifies the lead, and books the job into your calendar." },
  { icon: <Icon.mail />, name: "Seasonal Blitz", desc: "Opening/closing sequences and/or a promotional campaign of your choice, timed to lock in bookings before demand peaks." },
  { icon: <Icon.rocket />, name: "Quote & Estimate Follow-Up", desc: "Automated multi-touch nurture on unconverted quotes. Built for builders and renovators on high-ticket jobs." },
  { icon: <Icon.globe />, name: "Website Building", desc: "Fast, mobile-first sites built to rank locally and convert pool leads. Local SEO baked in from day one." },
];

function Services() {
  return (
    <section className="sec" id="services" data-screen-label="Services">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>What we build</span>
            <h2>A full marketing system <em>built for pool companies</em>.</h2>
          </div>
          <p>We build and manage the marketing systems that capture every lead, follow up every quote, and fill calendars — so you can stay on the job.</p>
        </div>
        <div className="services-grid">
          {SERVICE_CARDS.map(c => (
            <div className="service-card" key={c.name}>
              <div className="service-card-icon">{c.icon}</div>
              <h4>{c.name}</h4>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== How it works =====
function HowItWorks() {
  const steps = [
    { n: "01", icon: <Icon.search />, t: "Audit", d: "We map your inbound call volume, missed call rate, existing client list, and online presence. You get a written breakdown of where leads are leaking and a quote. Free, no obligation." },
    { n: "02", icon: <Icon.flow />, t: "Build", d: "We build your systems around your business: your service area, your jobs, your brand voice. You approve copy, messaging, and setup before anything goes live." },
    { n: "03", icon: <Icon.rocket />, t: "Launch", d: "We go live, connect everything to your existing tools and calendar, and run the first campaigns with real data. Most builds are live in 2–3 weeks." },
    { n: "04", icon: <Icon.spark />, t: "Tune", d: "We track what's working, refine sequences, and report monthly in plain English: leads captured, jobs booked, clients reactivated. No jargon." },
  ];
  return (
    <section className="sec" id="how" data-screen-label="How it works" style={{paddingTop: 0}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>How it works</span>
            <h2>Four steps from <em>audit</em> to a full calendar.</h2>
          </div>
          <p>No strategy decks. We audit your business, build around your workflow, go live in 2–3 weeks, and tune from there. You own everything we build.</p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-icon">{s.icon}</div>
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Chatbot demo =====
const BOT_SYSTEM = `You are Ava, the AI concierge for Achieve, a marketing company for pool companies doing $1M+ in annual revenue, run by Zane Robertson.

Achieve works with pool companies doing $1M+ in annual revenue and builds a complete marketing system — one retainer, everything included:

1. AI Voice Receptionist: A 24/7 voice agent that answers every inbound call, qualifies the lead, books the job, and routes urgent calls. Never misses a call.

2. Seasonal Opening/Closing Blitz: The highest-ROI thing we build. About 80% of pool service demand compresses into two windows: spring openings (Apr-Jun) and fall closings (Sep-Oct). In March, we send a proactive SMS campaign to last year's customer list: "Ready to book your opening? Reply YES." We capture the booking, sequence it onto the calendar, and pre-fill the season's cash flow before competitors have picked up the phone. Same system runs in August for fall closings.

3. Quote & Estimate Follow-Up: Built for pool builders and renovators. Automated multi-touch follow-up sequences (email, SMS, voicemail) at day 3, 7, 14, and 30 after a quote goes out. Pool installs run $50,000 to $150,000+. One recovered quote pays for years of this system.

4. Google Business Optimization: GMB profile build-out, seasonal post management, photo strategy, and automated review requests timed to job completion. More reviews, better local rankings, more jobs.

5. Local SEO: Targeted local search optimization to rank for pool service and install searches in your area. On-page, citations, and ongoing updates.

6. Website Build: Fast, mobile-first site built to rank locally and convert pool leads. Local SEO baked in from day one.

7. AI Chatbot: A custom AI chatbot trained on the client's services and FAQs. Answers questions 24/7, qualifies visitors, and captures contact info so no lead slips through.

Pricing: Custom, scoped to the business. We don't publish rates because every company has different scope, existing tools, and service area. The right approach is a free audit call with Zane to map out what makes sense.

Key industry insight: pool installs average $50,000–$150,000+. A builder closing one extra job per month from recovered quotes has an enormous ROI story. Service companies at $1M+ are typically missing leads on inbound calls and leaving seasonal demand on the table. Both problems are solvable inside the first 90 days.

Process: Free audit, then Build (client approves everything), then Launch in 2–3 weeks, then ongoing tuning. Client owns all workflows and assets. No lock-in. Month-to-month.

Contact: zane.rw.robertson@gmail.com · (416) 660-3723

How to chat:
- Be warm, concise, conversational. 1–3 short sentences per reply. No bullet lists unless explicitly asked.
- Know the difference between a service company (Skimmer users, recurring routes, seasonal) and a builder/renovator (quote-driven, high-ticket, long sales cycle, not on Skimmer).
- Use pool industry language: service routes, openings, closings, liner replacements, heater installs, winterization, equipment pads, Skimmer.
- Lead with revenue and operational impact, not technology or features.
- If asked about pricing, be honest: pricing is custom and scoped to the business. The audit call is where that conversation happens.
- If asked about case studies or past results, be honest: say we don't have published case studies to share yet, and suggest they book a call with Zane to discuss what's realistic for their business.
- Only suggest booking an audit when the user shows real buying intent. Never pitch it on every reply.
- Never use markdown formatting (no asterisks, no headers).`;

function Chatbot() {
  const initialQuick = ["What do you build?", "How does missed call text-back work?", "What does the AI Voice Receptionist do?"];
  const [messages, setMessages] = useState([{ from: "bot", text: "Hey, I'm Ava, Achieve's AI concierge. Ask me anything about how we help pool companies grow." }]);
  const [quick, setQuick] = useState(initialQuick);
  const [typing, setTyping] = useState(false);
  const [input, setInput] = useState("");
  const bodyRef = useRef(null);

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, typing]);

  const send = async (txt) => {
    if (!txt) return;
    const newHistory = [...messages, { from: "user", text: txt }];
    setMessages(newHistory);
    setQuick([]);
    setTyping(true);

    try {
      const apiMessages = newHistory.map(m => ({
        role: m.from === "user" ? "user" : "assistant",
        content: m.text,
      }));
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ system: BOT_SYSTEM, messages: apiMessages }),
      });
      const data = await res.json();
      setMessages(m => [...m, { from: "bot", text: (data.reply || "").trim() || "Hmm, can you say that another way?" }]);
    } catch (e) {
      setMessages(m => [...m, { from: "bot", text: "Sorry, hit a snag. Text Zane directly at (416) 660-3723." }]);
    } finally {
      setTyping(false);
    }
  };

  const onSubmit = (e) => { e.preventDefault(); if (input.trim()) { send(input.trim()); setInput(""); } };

  return (
    <section className="sec" id="demo" data-screen-label="Demo">
      <div className="wrap">
        <div className="demo-grid">
          <div className="demo-text">
            <span className="eyebrow"><span className="dot"></span>Ask Ava anything</span>
            <h2>Talk to the AI that knows <em>how pool companies run</em>.</h2>
            <p>Ava is trained on Achieve's pool industry offer. Ask about any service, how it works, or what makes sense for your business.</p>
            <div className="demo-bullets">
              <div className="demo-bullet"><Icon.check /><span>Speaks pool industry language: routes, installs, openings, closings, winterization.</span></div>
              <div className="demo-bullet"><Icon.check /><span>Leads with revenue impact, not feature lists.</span></div>
              <div className="demo-bullet"><Icon.check /><span>Replies in under 2 seconds, around the clock.</span></div>
            </div>
            <a className="btn btn-primary" href="#contact">Book a free audit <Icon.arrow /></a>
          </div>
          <div className="chatbot">
            <div className="chat-header">
              <div className="chat-avatar">A</div>
              <div>
                <div className="chat-name">Ava, Achieve concierge</div>
                <div className="chat-sub"><span className="live"></span>online · replies instantly</div>
              </div>
            </div>
            <div className="chat-body" ref={bodyRef}>
              {messages.map((m, i) => (
                <div key={i} className={"msg " + m.from}>{m.text}</div>
              ))}
              {typing && <div className="msg bot typing"><span></span><span></span><span></span></div>}
              {quick.length > 0 && !typing && (
                <div className="chat-quick">
                  {quick.map(q => <button key={q} onClick={() => send(q)}>{q}</button>)}
                </div>
              )}
            </div>
            <form className="chat-input" onSubmit={onSubmit}>
              <input value={input} onChange={e => setInput(e.target.value)} placeholder="Type a message..." />
              <button className="chat-send" type="submit"><Icon.send /></button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== About Zane =====
// ===== FAQ =====
const FAQS = [
  ["What types of pool businesses do you work with?", "Pool servicers, installers, and renovators. If you run a service route, the AI Voice Receptionist and Seasonal Blitz are your starting point. If you're a builder or renovator doing liner replacements, heater installs, and full builds, the Quote Follow-Up system is the offer built for your sales cycle. The systems are different because the businesses are different."],
  ["How does the Seasonal Opening/Closing Blitz actually work?", "In March, we send a proactive SMS campaign to everyone who was a customer last year: 'Ready to book your opening? Reply YES.' Every YES reply is captured, sequenced onto your calendar, and confirmed automatically. By the time the phone starts ringing in April, your calendar is already half-full. We run the same system in August for fall closings. It's the highest-ROI thing we sell, and the spring window is the reason it works: 80% of pool service demand compresses into six weeks."],
  ["Will the AI Voice Receptionist know enough about my business to handle calls properly?", "Yes. We build it around your specific services, service area, pricing structure, and how you want calls handled. It follows a script you approve before we go live. It doesn't improvise. Every call summary lands in your inbox so you stay in the loop without being on the phone."],
  ["How does quote follow-up work for builders and renovators?", "After a quote goes out, a multi-touch sequence fires automatically: follow-up at day 3, day 7, day 14, and day 30 via email, SMS, or voicemail depending on what's worked. The messages are written for high-ticket, considered purchases. Not aggressive. Professional. A liner replacement going quiet costs you hundreds to thousands in margin. This system keeps the conversation open until they're ready to move."],
  ["Why is review generation timed to job completion specifically?", "Because the window matters. Pool owners are most likely to leave a review right after the job is done. They either loved it or they're nervous about the work. Catching them at that moment, while the experience is fresh, is the difference between a review and silence. We also tie this into your local SEO: consistent reviews on Google are what separate you from the next company in a local search."],
  ["Do we own the systems if we stop working with Achieve?", "Yes. Every workflow, every campaign, every integration is yours. If you want to take it in-house or move on, you walk away with the full system. No lock-in, no held hostage."],
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="sec" id="faq" data-screen-label="FAQ" style={{paddingTop: 0}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>FAQ</span>
            <h2>Questions, <em>answered straight</em>.</h2>
          </div>
          <p>Couldn't find what you were looking for? Text me directly. The number is in the footer.</p>
        </div>
        <div className="faq">
          {FAQS.map(([q, a], i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q}</span>
                <span className="faq-toggle"><Icon.plus /></span>
              </button>
              <div className="faq-a"><p>{a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Contact =====
const FORMSPREE_ID = "xlgzenqe";

const INTENT_OPTIONS = [
  { value: "audit", label: "Not sure yet", sub: "Help me figure out what I need" },
  { value: "service", label: "I have something in mind", sub: "I want to ask about a specific service or package" },
];

function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const [intent, setIntent] = useState("audit");
  const [form, setForm] = useState({ name: "", email: "", phone: "", business: "", interest: "", message: "" });
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const onSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    try {
      const payload = { ...form, intent: intent === "audit" ? "Needs an audit" : "Inquiring about a service/package" };
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(payload),
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        setError("Something went wrong. Please email Zane directly at zane.rw.robertson@gmail.com");
      }
    } catch {
      setError("Something went wrong. Please email Zane directly at zane.rw.robertson@gmail.com");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="sec" id="contact" data-screen-label="Contact" style={{paddingTop: 0, paddingBottom: 40}}>
      <div className="wrap">
        <div className="contact-wrap">
          <div className="contact-text">
            <span className="eyebrow"><span className="dot"></span>Book a free audit</span>
            <h2>Let's find out what your business <em>is losing</em>.</h2>
            <p>Whether you know exactly what you want or just know leads are slipping through, reach out and we'll map it together. Free audit, no pitch deck.</p>
            <div className="contact-direct">
              <a href="mailto:zane.rw.robertson@gmail.com">
                <span className="icon"><Icon.mail /></span>
                <span><div className="lbl">Email</div><div className="val">zane.rw.robertson@gmail.com</div></span>
              </a>
              <a href="tel:+14166603723">
                <span className="icon"><Icon.phone /></span>
                <span><div className="lbl">Phone</div><div className="val">(416) 660-3723</div></span>
              </a>
              <a href="https://instagram.com/zanerobertsonn" target="_blank" rel="noreferrer">
                <span className="icon"><Icon.ig /></span>
                <span><div className="lbl">Instagram</div><div className="val">@zanerobertsonn</div></span>
              </a>
            </div>
          </div>
          <form className="form" onSubmit={onSubmit}>
            <div className="intent-toggle">
              {INTENT_OPTIONS.map(opt => (
                <button
                  key={opt.value}
                  type="button"
                  className={"intent-btn" + (intent === opt.value ? " active" : "")}
                  onClick={() => setIntent(opt.value)}
                >
                  <span className="intent-radio"></span>
                  <span>
                    <span className="intent-label">{opt.label}</span>
                    <span className="intent-sub">{opt.sub}</span>
                  </span>
                </button>
              ))}
            </div>
            <div className="form-row two">
              <div>
                <label>Your name</label>
                <input required value={form.name} onChange={set("name")} placeholder="Mike Thompson" />
              </div>
              <div>
                <label>Business</label>
                <input value={form.business} onChange={set("business")} placeholder="Thompson Pool Services" />
              </div>
            </div>
            <div className="form-row two">
              <div>
                <label>Email</label>
                <input required type="email" value={form.email} onChange={set("email")} placeholder="you@business.com" />
              </div>
              <div>
                <label>Phone</label>
                <input value={form.phone} onChange={set("phone")} placeholder="(555) 555-5555" />
              </div>
            </div>
            {intent === "service" && (
              <div className="form-row">
                <label>What are you interested in?</label>
                <select value={form.interest} onChange={set("interest")}>
                  <option value="">Select an option...</option>
                  <option>The Marketing Plan: full system, everything included</option>
                  <option>AI Voice Receptionist: 24/7 call answering & booking</option>
                  <option>Seasonal Opening/Closing Blitz: proactive customer outreach</option>
                  <option>Quote & Estimate Follow-Up: for builders & renovators</option>
                  <option>Google Business Optimization: more reviews, better rankings</option>
                  <option>Local SEO: rank for pool searches in my area</option>
                  <option>Website Build: local SEO, conversion-focused</option>
                  <option>AI Chatbot: 24/7 lead capture on my website</option>
                  <option>Not sure yet, help me figure out the right starting point</option>
                </select>
              </div>
            )}
            <div className="form-row">
              <label>{intent === "audit" ? "Tell me about your business" : "Anything else we should know?"}</label>
              <textarea
                value={form.message}
                onChange={set("message")}
                placeholder={intent === "audit"
                  ? "Tell us about your business: service route, builder, or renovator? How many calls per week? Do you send quotes that go cold? When's your busy season?"
                  : "Any questions, context, or details that would help us get started."}
              ></textarea>
            </div>
            <div className={"form-success" + (submitted ? " show" : "")}>
              Got it. Zane will be in touch within 24 hours.
            </div>
            {error && <div className="form-success show" style={{color:"var(--warn)", borderColor:"var(--warn)", background:"rgba(255,122,58,0.08)"}}>{error}</div>}
            <div className="form-submit">
              <button className="btn btn-primary" type="submit" disabled={sending || submitted}>
                {sending ? "Sending..." : submitted ? "Sent!" : <span style={{display:"inline-flex",alignItems:"center",gap:10}}>Send it over <Icon.arrow /></span>}
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

// ===== Pricing =====
const PLAN_FEATURES = [
  ["AI Voice Receptionist", "24/7 call answering, lead qualification, and job booking. Handles every inbound call so you never lose one to voicemail."],
  ["Seasonal Opening/Closing Blitz", "Proactive SMS + email campaigns to last year's customer list timed to pre-fill spring and fall demand windows before competitors pick up the phone."],
  ["Quote & Estimate Follow-Up", "Automated multi-touch sequences at day 3, 7, 14, and 30 after a quote goes out. Built for high-ticket builds and renovations where going dark costs thousands."],
  ["Google Business Optimization", "GMB profile build-out, seasonal post management, photo strategy, and automated review requests timed to job completion. More reviews, better local rankings."],
  ["Local SEO", "Targeted search optimization to rank for pool service and install searches in your area. On-page, citations, and ongoing updates."],
  ["Website Build", "Fast, mobile-first site built to rank locally and convert pool leads. Local SEO baked in from day one."],
  ["AI Chatbot", "Trained on your services and FAQs. Answers questions 24/7, qualifies visitors, and drops warm leads into your pipeline."],
  ["Monthly reporting", "Plain-English report every month: leads captured, jobs booked, campaigns sent, rankings moved."],
];

// ===== Risk Reversal =====
function RiskReversal() {
  const items = [
    "Live and working as specified within 3 weeks, or your money back.",
    "Month-to-month. Cancel anytime.",
    "No long-term contracts, ever.",
    "You own every workflow, campaign, and asset we build.",
  ];
  return (
    <div className="risk-strip">
      {items.map((item, i) => (
        <div className="risk-item" key={i}>
          <span className="risk-check"><Icon.check /></span>
          <span>{item}</span>
        </div>
      ))}
    </div>
  );
}

function Pricing() {
  return (
    <section className="pricing-section" id="pricing" data-screen-label="Pricing">
      <div className="wrap">
        <div className="pricing-hero">
          <span className="eyebrow"><span className="dot"></span>Plan</span>
          <h2>One plan. <em>Everything included.</em></h2>
          <p>Built for pool companies doing $1M+ in annual revenue. One monthly retainer covers every system we build and manage — no piecing together packages, no hidden add-ons.</p>
        </div>

        <div className="packages" style={{display: "flex", justifyContent: "center"}}>
          <div
            className="pkg featured"
            style={{maxWidth: 600, width: "100%", cursor: "pointer", transition: "transform 0.15s ease, box-shadow 0.15s ease"}}
            onClick={() => window.location.href = "scaler.html"}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 20px 60px rgba(0,0,0,0.35)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
          >
            <span className="pkg-badge">One plan</span>
            <div className="pkg-eyebrow">
              <span className="pkg-mark"><Icon.spark /></span>
              <span className="pkg-name">The Scaler</span>
            </div>
            <div className="pkg-includes">What's included</div>
            <ul className="pkg-features">
              {PLAN_FEATURES.map(([t]) => (
                <li key={t}>
                  <span className="pkg-check"><Icon.check /></span>
                  <span><b>{t}</b></span>
                </li>
              ))}
            </ul>
            <div style={{marginTop:24, padding:"16px 20px", background:"var(--accent)", borderRadius:10, textAlign:"center", display:"flex", alignItems:"center", justifyContent:"center", gap:8, fontSize:16, fontWeight:600, color:"#fff", letterSpacing:"0.01em"}}>
              Learn more about The Scaler <Icon.arrow />
            </div>
          </div>
        </div>

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

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand footer-col">
            <a href="#top" className="logo"><span className="logo-mark">A</span><span>achieve<em>.</em></span></a>
            <p>Marketing for pool companies doing $1M+ in annual revenue. We build the systems that capture every lead and fill your calendar.</p>
          </div>
          <div className="footer-col">
            <h5>Build</h5>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#demo">Live demo</a></li>
              <li><a href="#pricing">Plan</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Direct</h5>
            <ul>
              <li><a href="mailto:zane.rw.robertson@gmail.com">zane.rw.robertson@gmail.com</a></li>
              <li><a href="tel:+14166603723">(416) 660-3723</a></li>
              <li><a href="https://instagram.com/zanerobertsonn" target="_blank" rel="noreferrer">@zanerobertsonn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Achieve · Toronto · ON · Canada</span>
          <a href="privacy.html" style={{color:"var(--fg-4)", fontSize:13}}>Privacy Policy</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Nav />
      <Hero />
      <Services />
      <HowItWorks />
      <Chatbot />
      <Pricing />
      <FAQ />
      <Contact />
      <Footer />
    </>
  );
}

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