/* Main page sections */

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="nav-logo">
          <LogoFull height={72} />
        </a>
        <div className="nav-links">
          <a href="#services">What we build</a>
          <a href="#process">How it works</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="btn btn-primary btn-sm">
          Start a project <ArrowIcon size={14} />
        </a>
      </div>
    </nav>
  );
}

function Hero({ copy }) {
  const visRef = React.useRef(null);
  const mouse = useMousePos(visRef);
  const y = useScrollY();

  const parallax = (depth) => ({
    transform: `translate(${mouse.x * depth * 20}px, ${mouse.y * depth * 20 - y * depth * 0.15}px)`,
  });

  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <span className="eyebrow"><span className="dot" />{copy.eyebrow}</span>
          <h1>
            <span className="ink">{copy.h1a}</span><br />
            <span className="accent">{copy.h1b}</span><br />
            <span className="ink">{copy.h1c}</span>
          </h1>
          <p className="lede">{copy.lede}</p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary">
              Start your project <span className="arrow"><ArrowIcon /></span>
            </a>
            <a href="#process" className="btn btn-ghost">See how it works</a>
          </div>
          <div className="hero-meta">
            <div className="item"><span className="check">✓</span>Flat upfront fee</div>
            <div className="item"><span className="check">✓</span>Yours to keep forever</div>
            <div className="item"><span className="check">✓</span>Built in 2-6 weeks</div>
          </div>
        </div>

        <div className="hero-vis" ref={visRef}>
          <div className="blob b1 float" style={parallax(0.6)} />
          <div className="blob b2 float" style={parallax(-0.8)} />
          <div className="blob b3 float" style={parallax(0.3)} />

          <div className="app-card card-crm float" style={parallax(0.15)}>
            <div className="topbar">
              <div className="dot" /><div className="dot" /><div className="dot" />
              <div style={{flex:1, textAlign:'center', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-3)'}}>crm.rosalita-salon.app</div>
            </div>
            <div className="body">
              <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:15, marginBottom:12}}>Today's bookings</div>
              <div className="crm-row">
                <div className="crm-avatar">MK</div>
                <div className="crm-meta">
                  <div className="crm-name">Maria K.</div>
                  <div className="crm-sub">10:30 · color + cut</div>
                </div>
                <div className="crm-pill">CONFIRMED</div>
              </div>
              <div className="crm-row">
                <div className="crm-avatar v2">JT</div>
                <div className="crm-meta">
                  <div className="crm-name">James T.</div>
                  <div className="crm-sub">11:45 · beard trim</div>
                </div>
                <div className="crm-pill gray">PENDING</div>
              </div>
              <div className="crm-row">
                <div className="crm-avatar v3">SA</div>
                <div className="crm-meta">
                  <div className="crm-name">Sam A.</div>
                  <div className="crm-sub">13:00 · full color</div>
                </div>
                <div className="crm-pill">CONFIRMED</div>
              </div>
            </div>
          </div>

          <div className="app-card card-analytics float" style={parallax(-0.22)}>
            <div className="body">
              <div className="an-title">This week</div>
              <div className="an-big">$12,480</div>
              <div className="an-delta">▲ 18% vs last week</div>
              <div className="an-bars">
                <div className="an-bar" style={{height: '40%'}} />
                <div className="an-bar" style={{height: '60%'}} />
                <div className="an-bar" style={{height: '45%'}} />
                <div className="an-bar" style={{height: '78%'}} />
                <div className="an-bar" style={{height: '62%'}} />
                <div className="an-bar" style={{height: '90%'}} />
                <div className="an-bar" style={{height: '72%'}} />
              </div>
            </div>
          </div>

          <div className="card-booking float" style={parallax(0.3)}>
            <div className="bk-date">Thu · Apr 24</div>
            <div className="bk-head">Book a slot</div>
            <div>
              <span className="bk-slot">9:00</span>
              <span className="bk-slot active">10:30</span>
              <span className="bk-slot">12:00</span>
              <span className="bk-slot">14:15</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ['Custom CRMs', 'Booking tools', 'Analytics dashboards', 'Inventory systems', 'Customer portals', 'Internal tools', 'Staff scheduling', 'Invoicing apps'];
  const row = (
    <span>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          {t}<span className="sep">✦</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip-track">{row}{row}{row}</div>
    </div>
  );
}

function Services() {
  const cards = [
    {
      cls: 'a',
      glyph: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="9" cy="8" r="3.5" /><circle cx="17" cy="10" r="2.5" /><path d="M3 19c0-2.8 2.7-5 6-5s6 2.2 6 5" /><path d="M15 17c0-1.7 1.3-3 3-3s3 1.3 3 3" />
        </svg>
      ),
      title: 'Custom CRMs',
      desc: "Know every customer, every booking, every follow-up. Built around how you actually run the shop — not generic templates.",
      tags: ['Contacts', 'Pipelines', 'Notes', 'SMS / email'],
    },
    {
      cls: 'b',
      glyph: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="16" rx="3" /><path d="M3 9h18" /><circle cx="8" cy="14" r="1.5" /><path d="M12 14h5M12 17h3" />
        </svg>
      ),
      title: 'Any app tool',
      desc: "Booking widgets, inventory trackers, estimate builders, customer portals — if you can describe it, we can build it.",
      tags: ['Booking', 'Inventory', 'Portals', 'Anything else'],
    },
    {
      cls: 'c',
      glyph: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 20V10M10 20V4M16 20v-8M22 20H2" />
        </svg>
      ),
      title: 'Analytics you read',
      desc: "No dashboard sprawl. Just the handful of numbers that tell you if the week went well — and what to do about it.",
      tags: ['Revenue', 'Retention', 'Capacity', 'Alerts'],
    },
  ];
  return (
    <section className="services" id="services">
      <div className="wrap">
        <div className="section-label reveal">
          <span className="num">01</span>
          <span className="lbl">What we build</span>
          <span className="line" />
        </div>
        <h2 className="reveal">
          Software<br />built <em>for</em> your<br />shop — not<br />
          rented <em>to</em> it.
        </h2>
        <div className="svc-grid">
          {cards.map((c, i) => (
            <div key={i} className={`svc-card ${c.cls} reveal`} style={{transitionDelay: `${i * 80}ms`}}>
              <div className="svc-glyph">{c.glyph}</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="svc-tags">
                {c.tags.map(t => <span key={t} className="svc-tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { t: 'Talk', d: 'A 30-minute call. You tell us the headaches, we sketch the fix. Free, no pitch.', dur: 'Day 0' },
    { t: 'Quote', d: 'Flat price, fixed scope, written down. No hourly surprises, no retainer traps.', dur: '48 hours' },
    { t: 'Build', d: "We build. You see progress every few days. Changes welcomed — that's the whole point.", dur: '2–6 weeks' },
    { t: 'Keep', d: "You get the code, the server, and the keys. Optional support if you want it. No lock-in.", dur: 'Forever' },
  ];
  return (
    <section className="process" id="process">
      <div className="wrap">
        <div className="section-label reveal">
          <span className="num">02</span>
          <span className="lbl">How it works</span>
          <span className="line" />
        </div>
        <h2 className="reveal">Four steps. No retainer.</h2>
        <p className="sub reveal">One upfront price, one functional app, one set of keys — yours. That's the whole deal.</p>

        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className="step reveal" style={{transitionDelay: `${i * 100}ms`}}>
              <div className="step-num">{i + 1}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="dur">{s.dur}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = React.useState({ name: '', biz: '', email: '', needs: [], note: '' });
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);

  const needs = ['CRM', 'Booking', 'Inventory', 'Analytics', 'Customer portal', 'Not sure yet'];
  const toggleNeed = (n) => {
    setForm(f => ({
      ...f,
      needs: f.needs.includes(n) ? f.needs.filter(x => x !== n) : [...f.needs, n],
    }));
  };

  const submit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch('https://formspree.io/f/xaqaddzn', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, needs: form.needs.join(', ') }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        const data = await res.json();
        setError(data.error || 'Something went wrong. Please try again.');
      }
    } catch {
      setError('Network error. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className="contact" id="contact">
      <div className="wrap contact-grid">
        <div>
          <div className="section-label reveal">
            <span className="num">03</span>
            <span className="lbl">Start a project</span>
            <span className="line" />
          </div>
          <h2 className="reveal">
            Tell us what's<br />
            <em>breaking</em>.<br />
            We'll fix it.
          </h2>
          <p className="sub reveal">
            A short note is plenty. We'll reply within one business day with a few questions and a rough ballpark.
          </p>

          <div className="reveal">
            <div className="contact-card">
              <div className="cc-icon">@</div>
              <div>
                <div className="cc-label">Email</div>
                <div className="cc-val">drew@toolbeltapps.com</div>
              </div>
            </div>
          </div>
        </div>

        <form className="form reveal" onSubmit={submit}>
          {sent ? (
            <div className="success">
              <div className="big">✓</div>
              <h3>Got it — we'll be in touch.</h3>
              <p>You'll hear from us within one business day.</p>
            </div>
          ) : (
            <React.Fragment>
              <h3>Project brief</h3>
              <div className="helper">· Takes 60 seconds</div>

              <div className="form-row">
                <div className="field">
                  <label>Your name</label>
                  <input type="text" required value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Jane Doe" />
                </div>
                <div className="field">
                  <label>Business</label>
                  <input type="text" required value={form.biz} onChange={e => setForm({...form, biz: e.target.value})} placeholder="Jane's Plumbing" />
                </div>
              </div>

              <div className="field">
                <label>Email</label>
                <input type="email" required value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="jane@janesplumbing.com" />
              </div>

              <div className="field">
                <label>What do you need?</label>
                <div className="chips">
                  {needs.map(n => (
                    <button type="button" key={n} className={`chip ${form.needs.includes(n) ? 'active' : ''}`} onClick={() => toggleNeed(n)}>
                      {n}
                    </button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>What's the headache? <span style={{color:'var(--ink-3)', fontWeight:400}}>(optional)</span></label>
                <textarea value={form.note} onChange={e => setForm({...form, note: e.target.value})} placeholder="We're drowning in spreadsheets trying to track job schedules…" />
              </div>

              {error && <div style={{color:'var(--accent)', marginBottom:8}}>{error}</div>}
              <button type="submit" className="btn btn-primary" disabled={submitting}>
                {submitting ? 'Sending…' : <React.Fragment>Send it <ArrowIcon /></React.Fragment>}
              </button>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <h3>Ready to <em>own</em> your software?</h3>
          <a href="#contact" className="btn btn-primary">Start your project <ArrowIcon /></a>
        </div>
        <div className="footer-bottom">
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <LogoFull height={28} />
          </div>
          <div className="mono">© 2026 Toolbelt Apps · Built by humans</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Services, Process, Contact, Footer });