/* ============================================================
   App — sections + assembly
   ============================================================ */
const { useState, useEffect, useRef } = React;
const I = window.Icons;

function goTo(id) {
  const el = document.getElementById(id); if (!el) return;
  const y = window.scrollY + el.getBoundingClientRect().top - 76;
  window.scrollTo({ top: y, behavior: "smooth" });
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------------- Header ---------------- */
function Header({ onBook }) {
  const C = window.CONFIG;
  const [open, setOpen] = useState(false);
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const f = () => setSolid(window.scrollY > 24);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const links = [["services", "Services"], ["deals", "Deals"], ["pricing", "Pricing"], ["how", "How it works"], ["why", "Why us"], ["faq", "FAQ"]];
  return (
    <header className={"hdr" + (solid ? " solid" : "")}>
      <div className="wrap hdr-in">
        <a className="logo" href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          Griffs<span className="logo-dot">.</span>
        </a>
        <nav className="hdr-nav">
          {links.map(([id, l]) => <a key={id} onClick={() => goTo(id)}>{l}</a>)}
        </nav>
        <div className="hdr-cta">
          <button className="btn btn-primary" onClick={onBook}>Book a repair</button>
        </div>
        <button className="hdr-burger" onClick={() => setOpen(o => !o)} aria-label="Menu">
          {open ? <I.Close w={24} /> : <I.Menu w={24} />}
        </button>
      </div>
      {open && (
        <div className="hdr-mob">
          {links.map(([id, l]) => <a key={id} onClick={() => { goTo(id); setOpen(false); }}>{l}</a>)}
          <button className="btn btn-primary btn-block" onClick={() => { onBook(); setOpen(false); }}>Book a repair</button>
        </div>
      )}
    </header>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ onQuickStart }) {
  const C = window.CONFIG, SERVICES = window.SERVICES;
  const [svc, setSvc] = useState("");
  const [suburb, setSuburb] = useState("");
  const trust = [
    { ic: "Badge", t: "No fix, no charge" },
    { ic: "Clock", t: "After-hours & weekends" },
    { ic: "Truck", t: "We come to you" },
    { ic: "Bolt", t: "Reply within 1 day" },
  ];
  return (
    <section className="hero" id="hero">
      <div className="hero-glow" aria-hidden="true" />
      <div className="wrap hero-in">
        <div className="hero-l reveal in">
          <span className="eyebrow"><I.Pin w={14} /> Friendly tech help · {C.area}</span>
          <h1>Tech trouble?<br />We'll sort it — and<br /><span className="hl">stop it coming back.</span></h1>
          <p className="hero-sub">Fast, friendly, jargon-free help for your computers, phones and school devices. We fix the problem today and set things up so you won't need a second visit.</p>
          <div className="hero-chips">
            {trust.map(t => { const Ic = I[t.ic]; return <span className="chip" key={t.t}><Ic />{t.t}</span>; })}
          </div>
        </div>

        {/* quick-start card */}
        <div className="hero-card reveal in">
          <div className="hero-card-ribbon"><I.Tag w={14} /> Bundle &amp; save up to $60</div>
          <div className="hero-card-top">
            <strong>Get help in 60 seconds</strong>
            <span>Tell us the basics — finish the rest below.</span>
          </div>
          <label className="qs-l">What do you need?</label>
          <div className="qs-svc">
            {[...SERVICES, window.OTHER_SERVICE].map(s => (
              <button key={s.id} className={"qs-svc-b" + (svc === s.id ? " on" : "")} onClick={() => setSvc(s.id)}>{s.title}</button>
            ))}
          </div>
          <label className="qs-l">Your suburb</label>
          <input className="inp" placeholder="e.g. Terrigal" value={suburb} onChange={e => setSuburb(e.target.value)} />
          <button className="btn btn-primary btn-lg btn-block qs-go" onClick={() => onQuickStart({ service: svc, suburb })}>
            Start my request <I.Arrow w={18} />
          </button>
          <div className="qs-or">Free quote · no obligation · reply within 1 business day</div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Trust strip ---------------- */
function TrustStrip() {
  const items = [
    { ic: "Badge", t: "No fix, no charge", s: "If we can't solve it, you don't pay. Simple." },
    { ic: "Truck", t: "We come to you", s: "Free pickup & drop-off — no lugging gear around." },
    { ic: "Clock", t: "After-hours & weekends", s: "Help that fits around work and school." },
    { ic: "Bolt", t: "Reply within 1 business day", s: "Honest thoughts and clear next steps, fast." },
  ];
  return (
    <section className="trust">
      <div className="wrap trust-in">
        {items.map((x, i) => { const Ic = I[x.ic]; return (
          <div className="trust-item reveal" style={{ transitionDelay: `${i * 70}ms` }} key={x.t}>
            <span className="trust-ic"><Ic w={22} /></span>
            <div><strong>{x.t}</strong><p>{x.s}</p></div>
          </div>
        ); })}
      </div>
    </section>
  );
}

/* ---------------- Services ---------------- */
function Services({ onBook }) {
  const SERVICES = window.SERVICES;
  return (
    <section className="sec-pad" id="services">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">What we do</span>
          <h2>Real help for real problems.</h2>
          <p>From a slow laptop to a scary virus pop-up — here's what we sort out every week. Don't see yours? Just ask in the form.</p>
        </div>
        <div className="svc-grid" id="pricing">
          {SERVICES.map((s, i) => { const Ic = I[s.icon]; return (
            <article className="svc reveal" style={{ transitionDelay: `${(i % 3) * 70}ms` }} key={s.id}>
              <div className="svc-top">
                <span className="svc-ic"><Ic w={26} /></span>
                <span className="svc-price">{s.price}</span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <button className="svc-link" onClick={() => onBook({ service: s.id })}>Book this <I.ArrowUpRight w={16} /></button>
            </article>
          ); })}
        </div>
        <p className="svc-note"><I.Tag w={16} /> Prices are starting guides — you'll always get a clear, no-surprises quote before any work begins.</p>
      </div>
    </section>
  );
}

/* ---------------- Deals & bundles ---------------- */
function Bundles({ onBook }) {
  const BUNDLES = window.BUNDLES;
  return (
    <section className="sec-pad deals" id="deals">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center teal">Deals &amp; bundles</span>
          <h2>Bundle in protection &amp; save.</h2>
          <p>Most tech trouble is preventable. Pair any job with our Virus &amp; Scam Prevention set-up and pay less than booking them apart.</p>
        </div>
        <div className="deal-grid">
          {BUNDLES.map((b, i) => (
            <article className={"deal reveal" + (b.tag === "Most popular" ? " feat" : "")} style={{ transitionDelay: `${i * 80}ms` }} key={b.id}>
              {b.tag && <span className="deal-tag">{b.tag}</span>}
              <h3>{b.title}</h3>
              <p className="deal-blurb">{b.blurb}</p>
              <ul className="deal-items">
                {b.items.map(it => <li key={it}><I.Check w={16} sw={2.6} /> {it}</li>)}
              </ul>
              <div className="deal-price">
                <span className="deal-now">${b.now}</span>
                <span className="deal-was">${b.was}</span>
                <span className="deal-save">save ${b.was - b.now}</span>
              </div>
              <button className="btn btn-primary btn-block" onClick={() => onBook({ service: b.service, addon: true, bundle: b.title })}>Choose this bundle <I.Arrow w={17} /></button>
            </article>
          ))}
        </div>
        <p className="svc-note"><I.Shield w={16} /> Prefer to mix your own? Add prevention to any single service in the booking form and still save $40.</p>
      </div>
    </section>
  );
}

/* ---------------- How it works ---------------- */
function HowItWorks({ onBook }) {
  const steps = [
    { ic: "Chat", n: "01", t: "Tell us what's wrong", s: "Fill in the quick form — in plain English. Add a photo if it helps. Takes about a minute." },
    { ic: "Truck", n: "02", t: "We come to you", s: "We confirm a time that suits, then pick up your device or visit — after hours and weekends included." },
    { ic: "CheckCircle", n: "03", t: "Fixed & protected", s: "We solve it, set up protection so it won't happen again, and explain everything simply. No fix? No charge." },
  ];
  return (
    <section className="sec-pad how" id="how">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">How it works</span>
          <h2>Help should be easy to ask for.</h2>
          <p>No queues, no jargon, no stress. Three simple steps from problem to peace of mind.</p>
        </div>
        <div className="how-grid">
          {steps.map((x, i) => { const Ic = I[x.ic]; return (
            <div className="how-step reveal" style={{ transitionDelay: `${i * 90}ms` }} key={x.n}>
              <span className="how-n">{x.n}</span>
              <span className="how-ic"><Ic w={26} /></span>
              <h3>{x.t}</h3>
              <p>{x.s}</p>
            </div>
          ); })}
        </div>
        <div className="how-cta reveal">
          <button className="btn btn-primary btn-lg" onClick={() => onBook({})}>Get started <I.Arrow w={18} /></button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Why us ---------------- */
function WhyUs() {
  const stats = [
    { n: "1500+", l: "Problems solved" },
    { n: "7yr+", l: "In the industry" },
    { n: "100%", l: "Satisfaction rate" },
    { n: "$0", l: "If we can't fix it" },
  ];
  const points = [
    { ic: "Heart", t: "No problem too small", s: "Asking for help can feel daunting — never with us. Bring us anything, big or small." },
    { ic: "Star", t: "Honest & kind", s: "We genuinely love getting people back on track. No upsells, no talking down to you." },
    { ic: "Shield", t: "Prevention, not just repair", s: "We don't just fix today's problem — we set you up so it doesn't return." },
  ];
  return (
    <section className="sec-pad why" id="why">
      <div className="wrap why-in">
        <div className="why-l reveal">
          <span className="eyebrow teal">Why choose us</span>
          <h2>A tight-knit team that actually cares.</h2>
          <p className="why-lead">We work in school IT every day — new challenges, new problems, real people. We bring that same patience and know-how to your home. We treat your nan's laptop like it's our own.</p>
          <div className="why-points">
            {points.map(p => { const Ic = I[p.ic]; return (
              <div className="why-point" key={p.t}>
                <span className="why-point-ic"><Ic w={20} /></span>
                <div><strong>{p.t}</strong><p>{p.s}</p></div>
              </div>
            ); })}
          </div>
        </div>
        <div className="why-r reveal">
          <image-slot id="team" class="why-photo" shape="rounded" radius="20"
            placeholder="Drop a team / van photo"></image-slot>
          <div className="why-stats">
            {stats.map(s => (
              <div className="why-stat" key={s.l}><strong>{s.n}</strong><span>{s.l}</span></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
const FAQ_ITEMS = [
  { q: "What suburbs on the Central Coast do you cover?",
    a: "We cover the whole NSW Central Coast — from Woy Woy and Gosford up through Erina, Terrigal, Avoca Beach, Bateau Bay, The Entrance and Tuggerah to Wyong. We come to you with no travel surcharge across the area." },
  { q: "Do you fix Macs and MacBooks as well as Windows PCs?",
    a: "Yes. We work on Windows laptops, desktops, gaming PCs, MacBooks and iMacs, iPhones, iPads, Android phones and school-issued devices." },
  { q: "Do you come to my house or do I bring the device to you?",
    a: "We come to you. Pickup, on-site work and drop-off are included free across the Central Coast — no carrying gear around. If a repair needs the workshop, we take it and bring it back when done." },
  { q: "How quickly can you come out?",
    a: "We reply to every booking within one business day with a quote and a time. Most non-urgent jobs are booked within a few days; urgent jobs (lockouts, scam aftermath, can't-work-tomorrow) we try to fit in same-day or next-day." },
  { q: "Do you work after hours and on weekends?",
    a: "Yes — that's actually our normal hours. We're a mobile residential service designed to fit around work and school, so most of our visits are evenings and weekends." },
  { q: "What does \"No fix, no charge\" actually mean?",
    a: "If we can't resolve the problem, you don't pay a labour fee. You're only ever charged for parts you've approved in advance. We'll always tell you upfront if a job looks unviable so you can decide whether to proceed." },
  { q: "How much does a typical repair cost?",
    a: "Most jobs land in the $110–$200 range. Computer or mobile setup starts at $130, device optimisation at $140, virus and malware removal at $170, and scam prevention at $110. You get a clear written quote before any work begins." },
  { q: "Can you remove a virus without losing my photos and documents?",
    a: "In almost every case, yes. We do an offline backup of important files first, then clean the device. The only scenario where data is at risk is severe malware that has already encrypted or corrupted files — we'll tell you up front if that's likely." },
  { q: "Can you help with a school laptop or student device?",
    a: "Yes. We work in school IT every day, so we're familiar with NSW Department of Education and Catholic / independent school setups — Microsoft 365 login issues, OneDrive sync, Teams stuck on password, school printer install, and choosing the right laptop for a budget." },
  { q: "I just got a \"Microsoft\" pop-up telling me to call a number — what do I do?",
    a: "Don't call the number. Real Microsoft never pop-ups a phone number. Close the browser (force-quit if needed), don't enter any details, and don't let anyone remote into your computer. Book us in for a scam recovery clean-up — we'll check what's been installed, clean the machine, and help you contact your bank if needed." },
];

function FAQ() {
  return (
    <section className="sec-pad" id="faq">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">FAQ</span>
          <h2>Frequently asked questions.</h2>
          <p>Quick answers to the things people ask us most. Still not sure? Drop it in the booking form.</p>
        </div>
        <div className="faq-list reveal">
          {FAQ_ITEMS.map((it, i) => (
            <details className="faq-item" key={i} open={i === 0}>
              <summary><h3>{it.q}</h3></summary>
              <p>{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Booking ---------------- */
function Booking({ prefill }) {
  const C = window.CONFIG;
  const BookingForm = window.BookingForm;
  return (
    <section className="sec-pad book" id="booking">
      <div className="wrap book-in">
        <div className="book-l reveal">
          <span className="eyebrow">Let's talk</span>
          <h2>Book your repair.</h2>
          <p className="book-lead">Tell us a bit about the issue and we'll come back within one business day with honest thoughts, next steps and a clear price.</p>
          <ul className="book-list">
            <li><I.Check w={18} sw={2.6} /> Free, no-obligation quote</li>
            <li><I.Check w={18} sw={2.6} /> No fix, no charge — guaranteed</li>
            <li><I.Check w={18} sw={2.6} /> We can come to you</li>
          </ul>
          <div className="book-contact">
            <div className="bc-tile"><span className="bc-ic"><I.Bolt w={18} /></span><div><em>Fast response</em><strong>Within 1 business day</strong></div></div>
            <div className="bc-tile"><span className="bc-ic"><I.Clock w={18} /></span><div><em>When we work</em><strong>After hours &amp; weekends</strong></div></div>
            <div className="bc-tile"><span className="bc-ic"><I.Truck w={18} /></span><div><em>Where we go</em><strong>To you, across {C.area}</strong></div></div>
          </div>
        </div>
        <div className="book-r reveal">
          <BookingForm prefill={prefill} />
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const C = window.CONFIG;
  return (
    <footer className="ft">
      <div className="wrap ft-in">
        <div className="ft-brand">
          <a className="logo" href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>Griffs<span className="logo-dot">.</span></a>
          <p>Friendly, honest tech help for homes, families and students across {C.area}.</p>
          <div className="ft-chips">
            <span className="chip"><I.Badge />No fix, no charge</span>
            <span className="chip"><I.Truck />We come to you</span>
          </div>
        </div>
        <div className="ft-cols">
          <div>
            <h4>Services</h4>
            {window.SERVICES.slice(0, 5).map(s => <a key={s.id} onClick={() => goTo("services")}>{s.title}</a>)}
          </div>
          <div>
            <h4>Company</h4>
            <a onClick={() => goTo("why")}>Why us</a>
            <a onClick={() => goTo("how")}>How it works</a>
            <a onClick={() => goTo("pricing")}>Pricing</a>
            <a onClick={() => goTo("booking")}>Book a repair</a>
          </div>
          <div>
            <h4>Get in touch</h4>
            <a onClick={() => goTo("booking")}>Book a repair</a>
            <a onClick={() => goTo("booking")}>Request a quote</a>
            <span className="ft-hours">{C.hours}</span>
            <span className="ft-area">Serving {C.area}</span>
          </div>
        </div>
      </div>
      <div className="wrap ft-bottom">
        <span>© {new Date().getFullYear()} {C.business}. All rights reserved.</span>
        <div className="ft-legal"><a href="/privacyPolicy">Privacy Policy</a><a href="/terms-of-service">Terms of Service</a></div>
      </div>
    </footer>
  );
}

/* ---------------- App ---------------- */
function App() {
  const [prefill, setPrefill] = useState(null);
  useReveal();
  const book = (p = {}) => { setPrefill({ ...p, _t: Date.now() }); setTimeout(() => goTo("booking"), 60); };
  return (
    <>
      <Header onBook={() => book({})} />
      <Hero onQuickStart={book} />
      <TrustStrip />
      <Services onBook={book} />
      <Bundles onBook={book} />
      <HowItWorks onBook={book} />
      <WhyUs />
      <FAQ />
      <Booking prefill={prefill} />
      <Footer />
    </>
  );
}

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