/* ===================== PROCESS / HOW WE WORK ===================== */
function Process() {
  const steps = [
  {
    n: "01",
    t: "Talk for 20 minutes",
    d: "Free, no slides. Tell us about your business and what's getting in the way. We'll be honest about whether we can help."
  },
  {
    n: "02",
    t: "A plain-English proposal",
    d: "What we'll build, what it costs, and what it'll do for you — written like a human wrote it, with no surprises."
  },
  {
    n: "03",
    t: "We build, you check in",
    d: "We send a working preview every week. You give thoughts, we iterate. No 'big reveal' at the end."
  },
  {
    n: "04",
    t: "Live, and looked after",
    d: "We launch, train your team, and stick around to keep things running. You own everything we build."
  }];

  return (
    <section id="process" className="process" data-screen-label="05 Process">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">How we work</span>
          <h2 className="h-1">Friendly, fast, and zero waffle.</h2>
        </div>
        <div className="process-row reveal-stagger">
          {steps.map((s) =>
          <div key={s.n} className="process-card">
              <div className="proc-num">{s.n}</div>
              <h3 className="h-3">{s.t}</h3>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ===================== PROOF / STATS BAND ===================== */
function ProofBand() {
  return (
    <section className="proof-band" data-screen-label="06 Proof">
      <div className="container">
        <div className="proof-inner">
          <div className="proof-head">
            <span className="eyebrow" style={{ color: "var(--green-bright)" }}>The numbers</span>
            <h2 className="h-1" style={{ color: "white" }}>What working with us looks like, in metrics.</h2>
          </div>
          <div className="proof-grid">
            <div className="proof-item">
              <div className="proof-v"><Counter to={160} prefix="+" /></div>
              <div className="proof-l">new visitors per month</div>
              <div className="proof-c">Performance Hub — Medway</div>
            </div>
            <div className="proof-item">
              <div className="proof-v"><Counter to={5} suffix="/day" /></div>
              <div className="proof-l">qualified enquiries delivered</div>
              <div className="proof-c">AquaFix Plumbing</div>
            </div>
            <div className="proof-item">
              <div className="proof-v"><Counter to={5} suffix="+ hrs" /></div>
              <div className="proof-l">admin saved every week</div>
              <div className="proof-c">Dance School of Rochester</div>
            </div>
            <div className="proof-item">
              <div className="proof-v"><Counter to={412} prefix="+" suffix="%" /></div>
              <div className="proof-l">enquiry growth in 90 days</div>
              <div className="proof-c">Kentish Roofing Co.</div>
            </div>
          </div>
          <div className="proof-quote">
            <div className="pq-mark">"</div>
            <div className="pq-body">
              <p>They built us a website that <em>works</em>. We get five enquiries a day now. The WhatsApp callback is the best thing we've ever done.</p>
              <div className="pq-name">
                <div className="pq-avatar">JR</div>
                <div>
                  <strong>James Roberts</strong>
                  <div style={{ color: "rgba(255,255,255,0.6)", fontSize: "13px" }}>Owner · AquaFix Plumbing</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ===================== CTA / CONTACT TEASER ===================== */
function ContactTeaser() {
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [name, setName] = React.useState("");
  const [biz, setBiz] = React.useState("");
  const [contact, setContact] = React.useState("");
  const [help, setHelp] = React.useState("");
  const [tier, setTier] = React.useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          access_key: "f5e0597a-f4b2-4bf3-bd31-8838a14de4b8",
          subject: `New SMBeMore enquiry from ${name} — ${biz}`,
          from_name: name,
          name,
          business: biz,
          contact,
          message: help,
          tier: tier || "Not specified",
          redirect: false,
        }),
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        alert("Something went wrong — please email info@smbemore.com directly.");
      }
    } catch (err) {
      alert("Could not send — please email info@smbemore.com directly.");
    } finally {
      setSending(false);
    }
  };
  return (
    <section id="contact" className="contact-teaser" data-screen-label="07 Contact">
      <div className="container">
        <div className="ct-grid">
          <div className="ct-left reveal">
            <span className="eyebrow">Let's talk</span>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5.5vw, 84px)" }}>
              Got a business?<br />
              <span className="accent-green">Let's grow it.</span>
            </h2>
            <p className="lede">A 20-minute call, on us. We'll listen, ask good questions, and tell you honestly whether we're the right fit. If we're not, we'll point you somewhere better.</p>
            <div className="ct-actions">
              <a className="btn btn-whatsapp btn-lg" href="https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20my%20business" target="_blank" rel="noreferrer">
                <Icon.whatsapp /> Chat on WhatsApp
              </a>
              <a className="btn btn-ghost btn-lg" href="mailto:info@smbemore.com">
                info@smbemore.com
              </a>
            </div>
            <div className="ct-meta">
              <div><strong>Reply within</strong> a few hours, mon–fri</div>
              <div><strong>Based in</strong> Kent · working everywhere</div>
            </div>
          </div>

          <div className="ct-form reveal">
            {!submitted ?
            <form onSubmit={handleSubmit}>
                <div className="ct-form-h">
                  <span className="chip chip-green"><span className="dot-pulse green" /> Form open</span>
                  <h3 className="h-2" style={{ marginTop: "16px" }}>Tell us briefly what you're after.</h3>
                </div>
                <label>
                  <span>Your name</span>
                  <input value={name} onChange={(e) => setName(e.target.value)} required placeholder="e.g. Sarah Beckett" />
                </label>
                <label>
                  <span>Business</span>
                  <input value={biz} onChange={(e) => setBiz(e.target.value)} required placeholder="e.g. Beckett &amp; Sons Plumbing" />
                </label>
                <label>
                  <span>Email or phone <em style={{color: "var(--ink-3)", fontStyle: "normal", fontWeight: 400}}>· so we can reply</em></span>
                  <input value={contact} onChange={(e) => setContact(e.target.value)} required placeholder="you@business.co.uk or 07..." />
                </label>
                <label>
                  <span>What do you need help with?</span>
                  <textarea value={help} onChange={(e) => setHelp(e.target.value)} rows="4" placeholder="A new website, more leads, an admin system, an AI assistant..." />
                </label>
                <div className="ct-tier-pick">
                  <div className="ct-tier-pick-l">Closest tier?</div>
                  <div className="ct-tier-chips">
                    {TIERS.map((t) =>
                  <button type="button" key={t.id}
                    className={"ct-tier-chip" + (tier === t.id ? " selected" : "")}
                    style={{ "--c": t.color, ...(tier === t.id ? { borderColor: t.color, color: t.color, background: "white" } : {}) }}
                    onClick={() => setTier(tier === t.id ? "" : t.id)}>
                        {t.label}
                      </button>
                  )}
                  </div>
                </div>
                <button className="btn btn-accent btn-lg" type="submit" style={{ width: "100%", justifyContent: "center" }} disabled={sending}>
                  {sending ? "Sending…" : <><span>Send enquiry</span> <Icon.arrow /></>}
                </button>
                <div className="ct-form-foot">We typically reply within a few hours.</div>
              </form> :

            <div className="ct-success">
                <div className="ct-success-icon"><Icon.check /></div>
                <h3 className="h-2">Got it — thanks {name || "there"}.</h3>
                <p className="lede">We'll be in touch within a few hours. In the meantime, here's our WhatsApp if you'd rather chat now.</p>
                <a className="btn btn-whatsapp btn-lg" href="https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20my%20business" target="_blank" rel="noreferrer">
                  <Icon.whatsapp /> Open WhatsApp
                </a>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

window.Process = Process;
window.ProofBand = ProofBand;
window.ContactTeaser = ContactTeaser;