/* Homepage */
const { Header, CallBar, CTAStrip, Footer, FAQList, useReveal, HeroBackdrop, ServiceAreaMap, Icon, PHONE, PHONE_HREF, EMAIL, ADDRESS } = window;

const SERVICES = [
  { icon: "wrench", photo: "assets/photo-engine-repair-new.png", title: "Boat Engine Repair", copy: "Diagnosis, OEM parts, and full engine repair for inboard and outboard motors.", href: "/services/boat-engine-repair" },
  { icon: "clock", photo: "assets/photo-engine-maintenance.jpg", title: "Engine Maintenance & Tune-Up", copy: "Regular servicing, oil changes, impeller replacement, winterizing, and bottom paint.", href: "/services/boat-engine-maintenance" },
  { icon: "boat", photo: "assets/photo-mobile-repair.png", title: "Mobile Boat Repair", copy: "We come to your dock, marina, or driveway anywhere in southeastern NC.", href: "/services/mobile-boat-repair" },
  { icon: "bolt", photo: "assets/photo-repower-mercury.png", title: "New Engines / Repower", copy: "Replace your engine entirely. We source and install Yamaha, Mercury, and Suzuki.", href: "/services/boat-repower" },
  { icon: "antenna", photo: "assets/photo-engine-maintenance.jpg", title: "Marine Electronics", copy: "Installation and repair of GPS, chartplotters, VHF, fish finders, and more.", href: "/services/marine-electronics" },
  { icon: "truck", photo: "assets/photo-engine-repair.jpg", title: "Pickup & Drop-Off", copy: "Can't bring your boat to us? We'll come get it and return it when it's done.", href: "/services/mobile-boat-repair" },
  { icon: "shield", photo: "assets/photo-boat-storage.jpg", title: "Boat Storage", copy: "Secure gated lot with key code access. Short-term and long-term options, after-hours entry included.", href: "/services/boat-storage" },
  { icon: "swap", photo: "assets/photo-trailer-repair.png", title: "Trailer Repair", copy: "Full trailer service: bearings, brakes, axles, lights, and frames. Keep your rig road-ready.", href: "/services/trailer-repair" },
  { icon: "boat", photo: "assets/photo-bottom-painting.png", title: "Bottom Painting", copy: "Anti-fouling paint applied right — protect your hull and fight growth in coastal NC waters.", href: "/services/bottom-painting" },
];

const REVIEWS = [
  { q: "J Franks came out to my boat at the marina, diagnosed the issue in 20 minutes, and had it running the same day. Didn't charge me for things I didn't need. That's rare.", n: "Mike T.", m: "Wilmington, NC" },
  { q: "Called about my Mercury outboard that wouldn't start after sitting over winter. They picked it up, fixed it, and dropped it back off. Couldn't be easier.", n: "Sarah K.", m: "Wrightsville Beach" },
  { q: "Fair prices, fast work, and they actually explain what's wrong. Been using them for two years now.", n: "Dave R.", m: "Hampstead, NC" },
];

const FAQS = [
  { q: "Do you offer mobile boat repair in Wilmington, NC?", a: "Yes. We provide mobile marine service throughout Wilmington and southeastern NC. Our mechanics come to your dock, marina, or driveway. We also offer boat pickup and drop-off for shop repairs." },
  { q: "What engine brands do you service?", a: "We service Yamaha, Mercury, and Suzuki outboard motors, as well as a range of inboard engines. We use OEM parts to ensure your engine warranty remains valid." },
  { q: "How much does boat engine repair cost in Wilmington?", a: "Costs vary by engine type and problem. Minor tune-ups start around $150–$300. Engine repairs range from $300–$2,500+. Repowers (full engine replacement) start around $3,500. Call for a free estimate." },
];

const Home = () => {
  useReveal();
  return (
    <>
      <Header active="home" />

      {/* Hero */}
      <section className="hero">
        <div className="hero-bg hero-photo" style={{ backgroundImage: "url(assets/photo-hero-flipped.jpg)" }}></div>
        <div className="container hero-inner">
          <div className="hero-eyebrow"><span className="dot"></span>Wilmington · NC · Est. on the Cape Fear</div>
          <h1>Boat Engine Repair <br/>& Marine Services <br/><span className="accent">in Wilmington, NC</span></h1>
          <p className="hero-sub">We fix engines, install electronics, and service your vessel — at your dock, your marina, or our shop.</p>
          <div className="hero-cta">
            <a href={PHONE_HREF} className="btn btn-primary btn-lg"><Icon name="phone" size={18} />Call {PHONE}</a>
            <a href="/services" className="btn btn-outline btn-lg">View Our Services</a>
          </div>
        </div>
        <div className="trust-bar">
          <div className="container trust-grid">
            <div className="trust-item"><span className="ti-icon"><Icon name="wrench" size={28} /></span><span className="ti-txt">Yamaha · Mercury · Suzuki Engines</span></div>
            <div className="trust-item"><span className="ti-icon"><Icon name="boat" size={28} /></span><span className="ti-txt">Mobile Service — We Come to You</span></div>
            <div className="trust-item"><span className="ti-icon"><Icon name="truck" size={28} /></span><span className="ti-txt">Free Boat Pickup & Drop-Off</span></div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="services">
        <div className="container reveal">
          <div className="section-eyebrow"><span className="bar"></span>Our Services</div>
          <h2 className="section-title">What we fix & service</h2>
          <p className="section-lede">Full-service marine repair — engines, electronics, hulls, and everything between. At your location or ours.</p>
          <div className="svc-grid">
            {SERVICES.map((s, i) => (
              <a key={i} href={s.href} className="svc-card svc-card-photo">
                {s.photo && <div className="svc-photo" style={{ backgroundImage: `url(${s.photo})` }}>
                  <div className="svc-icon"><Icon name={s.icon} size={20} /></div>
                </div>}
                <div className="svc-body">
                  <h3>{s.title}</h3>
                  <p>{s.copy}</p>
                  <span className="svc-link">Learn more <Icon name="arrow" size={14} /></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Why */}
      <section className="why">
        <div className="container reveal">
          <div className="section-eyebrow"><span className="bar"></span>Why J Franks</div>
          <h2 className="section-title">Why boat owners in Wilmington choose us</h2>
          <div className="why-grid">
            <div className="why-card">
              <div className="why-icon"><Icon name="shield" size={28} /></div>
              <h3>Independent & Local</h3>
              <p>No dealership markup. No upselling. We're a local Wilmington shop that charges fair prices and tells you exactly what your boat needs.</p>
            </div>
            <div className="why-card">
              <div className="why-icon"><Icon name="boat" size={28} /></div>
              <h3>We Come to You</h3>
              <p>Our mobile service means you don't have to haul your boat. We bring our tools to your dock, marina, or driveway — anywhere in southeastern NC.</p>
            </div>
            <div className="why-card">
              <div className="why-icon"><Icon name="check" size={28} /></div>
              <h3>OEM Parts, Real Warranties</h3>
              <p>We use manufacturer-approved OEM parts on all engine repairs, so your factory warranty stays intact.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Reviews */}
      <section>
        <div className="container reveal">
          <div className="section-eyebrow"><span className="bar"></span>Customer Stories</div>
          <h2 className="section-title">What our customers say</h2>
          <div className="reviews-grid">
            {REVIEWS.map((r, i) => (
              <div className="review-card" key={i}>
                <div className="stars">★★★★★</div>
                <p className="review-quote">"{r.q}"</p>
                <div>
                  <div className="review-author">{r.n}</div>
                  <div className="review-meta">{r.m}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32 }}>
            <a href="/reviews" className="btn btn-ghost">Read All Reviews <Icon name="arrow" size={14} /></a>
          </div>
        </div>
      </section>

      {/* FAQ Preview */}
      <section className="faq">
        <div className="container reveal">
          <div className="section-eyebrow"><span className="bar"></span>FAQ</div>
          <h2 className="section-title">Common questions</h2>
          <FAQList items={FAQS} />
          <div style={{ marginTop: 32 }}>
            <a href="/faq" className="btn btn-primary">See All FAQs <Icon name="arrow" size={14} /></a>
          </div>
        </div>
      </section>

      {/* Service Area */}
      <section className="area-section">
        <div className="container reveal">
          <div className="section-eyebrow"><span className="bar"></span>Coverage</div>
          <h2 className="section-title">Serving Wilmington & southeastern NC</h2>
          <div className="area-grid">
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--muted)", marginBottom: 16 }}>
                We service boat owners throughout New Hanover, Brunswick, and Pender counties — including Wilmington, Wrightsville Beach, Carolina Beach, Kure Beach, Hampstead, Surf City, Topsail Island, Castle Hayne, and Leland.
              </p>
              <div className="area-list">
                {["Wilmington", "Wrightsville Beach", "Carolina Beach", "Kure Beach", "Hampstead", "Surf City", "Topsail Island", "Castle Hayne", "Leland", "Ogden", "Porters Neck"].map((c, i) => (
                  <span className="area-chip" key={i}>{c}</span>
                ))}
              </div>
              <div style={{ marginTop: 24 }}>
                <a href="/service-area" className="btn btn-ghost">Check If We Service Your Area <Icon name="arrow" size={14} /></a>
              </div>
            </div>
            <div className="area-map"><ServiceAreaMap /></div>
          </div>
        </div>
      </section>

      <CTAStrip />
      <Footer />
      <CallBar />
    </>
  );
};

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