/* ============== Shared components ============== */
const { useState, useEffect } = React;

const PHONE = "(910) 520-1478";
const PHONE_HREF = "tel:9105201478";
const ADDRESS = "8528 Market St, Wilmington, NC 28411";
const EMAIL = "service@jfranksmarine.com";
const P = (path) => ((typeof window !== "undefined" && window.LOGO_PREFIX) || "") + path;

// === Icons ===
const Icon = ({ name, size = 24 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "phone": return <svg {...props}><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-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case "wrench": return <svg {...props}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>;
    case "boat": return <svg {...props}><path d="M2 21c.6.5 1.2 1 2.5 1s2-.5 3-1 1.7-1 3-1 1.7.5 3 1 1.7 1 3 1 2-.5 3-1m-18-4 9-4 9 4M5 17V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10"/><circle cx="12" cy="11" r="1"/></svg>;
    case "truck": return <svg {...props}><path d="M5 17h14M5 17a2 2 0 1 1-4 0M19 17a2 2 0 1 1-4 0M3 7h11v10H3zM14 10h4l3 3v4h-7"/></svg>;
    case "bolt": return <svg {...props}><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>;
    case "antenna": return <svg {...props}><path d="M5 4.5C3.8 5.5 3 7.4 3 9.5s.8 4 2 5M19 4.5c1.2 1 2 2.9 2 5s-.8 4-2 5M7.5 7c-.6.7-1 1.7-1 3s.4 2.3 1 3M16.5 7c.6.7 1 1.7 1 3s-.4 2.3-1 3"/><circle cx="12" cy="10" r="2"/><path d="M12 12v10M9 22h6"/></svg>;
    case "swap": return <svg {...props}><path d="m17 3 4 4-4 4M21 7H9M7 21l-4-4 4-4M3 17h12"/></svg>;
    case "shield": return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case "map": return <svg {...props}><path d="m1 6 7-3 8 3 7-3v15l-7 3-8-3-7 3zM8 3v15M16 6v15"/></svg>;
    case "mail": return <svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg>;
    case "pin": return <svg {...props}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "arrow": return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "check": return <svg {...props}><path d="M20 6 9 17l-5-5"/></svg>;
    case "clock": return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case "star": return <svg {...props} fill="currentColor"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>;
    default: return null;
  }
};

const LogoMark = ({ size = 44, dark = false }) => (
  <img className={`logo-img ${dark ? "dark" : ""}`} src={(typeof window !== "undefined" && window.LOGO_PREFIX || "") + "assets/franks-logo.png"} alt="J Franks Marine" style={{ height: size }} />
);

const Header = ({ active = "" }) => (
  <header className="header">
    <div className="container header-inner">
      <a href={"/"} className="logo" aria-label="J Franks Marine — Home">
        <LogoMark />
      </a>
      <nav className="nav">
        <div className="nav-links">
          <a href="/services" className={active === "services" ? "active" : ""}>Services</a>
          <a href="/about" className={active === "about" ? "active" : ""}>About</a>
          <a href="/faq" className={active === "faq" ? "active" : ""}>FAQ</a>
          <a href="/reviews" className={active === "reviews" ? "active" : ""}>Reviews</a>
          <a href="/service-area" className={active === "area" ? "active" : ""}>Service Area</a>
          <a href="/contact" className={active === "contact" ? "active" : ""}>Contact</a>
        </div>
        <div className="header-cta">
          <a href={PHONE_HREF} className="header-phone"><Icon name="phone" size={16} /><span className="lbl">{PHONE}</span></a>
          <a href={PHONE_HREF} className="btn btn-primary">Call Now</a>
        </div>
      </nav>
    </div>
  </header>
);

const CallBar = () => (
  <a href={PHONE_HREF} className="call-bar"><Icon name="phone" size={18} /> Call Now: {PHONE}</a>
);

const CTAStrip = () => (
  <section className="cta-strip">
    <div className="container cta-inner">
      <div>
        <h2>Ready to get your boat back on the water?</h2>
        <div className="cta-info">
          <a href={PHONE_HREF}><Icon name="phone" size={18} />{PHONE}</a>
          <a href={`mailto:${EMAIL}`}><Icon name="mail" size={18} />{EMAIL}</a>
          <span><Icon name="pin" size={18} />{ADDRESS}</span>
        </div>
      </div>
      <div className="cta-buttons">
        <a href={PHONE_HREF} className="btn btn-primary btn-lg"><Icon name="phone" size={18} />Call Now</a>
        <a href="/contact" className="btn btn-outline btn-lg">Send a Message</a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <a href={"/"} className="logo" style={{ marginBottom: 16 }} aria-label="J Franks Marine">
            <LogoMark size={36} />
          </a>
          <p style={{ marginTop: 16, lineHeight: 1.6, fontSize: 13 }}>
            Full-service boat engine repair, marine electronics, and mobile marine service throughout southeastern North Carolina.
          </p>
        </div>
        <div>
          <h4>Services</h4>
          <ul>
            <li><a href="/services/boat-engine-repair">Engine Repair</a></li>
            <li><a href="/services/mobile-boat-repair">Mobile Service</a></li>
            <li><a href="/services/boat-engine-maintenance">Maintenance</a></li>
            <li><a href="/services/boat-repower">Repower</a></li>
            <li><a href="/services/marine-electronics">Electronics</a></li>
            <li><a href="/services/boat-storage">Boat Storage</a></li>
            <li><a href="/services/trailer-repair">Trailer Repair</a></li>
            <li><a href="/services/bottom-painting">Bottom Painting</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/reviews">Reviews</a></li>
            <li><a href="/service-area">Service Area</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a href={PHONE_HREF}>{PHONE}</a></li>
            <li><a href={`mailto:${EMAIL}`}>{EMAIL}</a></li>
            <li>8528 Market St<br/>Wilmington, NC 28411</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 J Franks Marine · 8528 Market St, Wilmington, NC 28411 · {PHONE}</div>
        <div style={{display:"flex",gap:16,alignItems:"center",flexWrap:"wrap",justifyContent:"flex-end"}}>
          <span>Licensed · Insured · Yamaha · Mercury · Suzuki</span>
          <a href={P("llms.txt")} style={{fontSize:11,opacity:0.5,letterSpacing:"0.04em"}} aria-label="Site information for AI models">llms.txt</a>
        </div>
      </div>
    </div>
  </footer>
);

// FAQ accordion
const FAQList = ({ items, dark = false }) => {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq-list">
      {items.map((it, i) => (
        <div className="faq-item" key={i}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="pm">{open === i ? "−" : "+"}</span>
          </button>
          {open === i && <div className="faq-a">{it.a}</div>}
        </div>
      ))}
    </div>
  );
};

// Reveal observer
const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((es) => es.forEach((e) => e.isIntersecting && e.target.classList.add("in")), { threshold: 0.1 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

// Hero SVG backdrop
const HeroBackdrop = () => (
  <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="hsky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#1a1814" />
        <stop offset="50%" stopColor="#0d0c0a" />
        <stop offset="100%" stopColor="#000000" />
      </linearGradient>
    </defs>
    <rect width="1600" height="900" fill="url(#hsky)" />
    {[...Array(14)].map((_, i) => (
      <path key={i} d={`M 0 ${500 + i * 30} Q 400 ${495 + i * 30} 800 ${500 + i * 30} T 1600 ${500 + i * 30}`} stroke="rgba(184,144,88,0.20)" strokeWidth="0.7" fill="none" />
    ))}
    {/* Outboard engine schematic */}
    <g transform="translate(1100, 180)" stroke="rgba(184,144,88,0.45)" strokeWidth="1.2" fill="none">
      <path d="M 0 0 L 200 0 Q 230 0 230 30 L 230 280 Q 230 310 200 310 L 0 310 Q -30 310 -30 280 L -30 30 Q -30 0 0 0 Z" />
      <line x1="-30" y1="50" x2="230" y2="50" />
      <rect x="50" y="310" width="100" height="120" />
      <path d="M 30 430 L 170 430 L 150 560 L 50 560 Z" />
      <circle cx="100" cy="510" r="20" />
    </g>
    {/* Ship silhouette small */}
    <g opacity="0.6">
      <path d="M 280 540 L 460 540 L 450 565 L 290 565 Z" fill="#000" />
      <rect x="340" y="510" width="60" height="30" fill="#000" />
    </g>
  </svg>
);

// Map SVG
const ServiceAreaMap = () => (
  <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "100%" }}>
    <defs>
      <radialGradient id="mglow" cx="50%" cy="50%">
        <stop offset="0%" stopColor="#B33D1F" stopOpacity="0.45" />
        <stop offset="60%" stopColor="#B33D1F" stopOpacity="0.12" />
        <stop offset="100%" stopColor="#B33D1F" stopOpacity="0" />
      </radialGradient>
      <pattern id="mgrid" width="20" height="20" patternUnits="userSpaceOnUse">
        <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="0.5"/>
      </pattern>
    </defs>
    <rect width="400" height="300" fill="#111111" />
    <rect width="400" height="300" fill="url(#mgrid)" />
    {/* Coast */}
    <path d="M 0 80 Q 80 70 140 100 Q 200 130 230 160 Q 260 200 280 240 Q 300 270 320 300" stroke="rgba(184,144,88,0.55)" strokeWidth="1.5" fill="none" strokeDasharray="2 3" />
    {/* Water */}
    <path d="M 140 100 L 400 100 L 400 300 L 320 300 Q 300 270 280 240 Q 260 200 230 160 Q 200 130 140 100 Z" fill="rgba(50,40,28,0.4)" />
    {/* Service radius */}
    <circle cx="200" cy="170" r="160" fill="url(#mglow)" />
    {/* HQ pin */}
    <circle cx="200" cy="170" r="14" fill="#B33D1F" opacity="0.3" />
    <circle cx="200" cy="170" r="6" fill="#B33D1F" />
    <circle cx="200" cy="170" r="2.5" fill="#fff" />
    {/* Other pins */}
    {[[140, 110, "Topsail"], [170, 140, "Hampstead"], [230, 200, "Wrightsville"], [255, 230, "Carolina Bch"], [280, 260, "Kure"], [185, 200, "Wilmington"], [140, 220, "Leland"], [220, 270, "Southport"]].map(([x, y, label], i) => (
      <g key={i}>
        <circle cx={x} cy={y} r="3" fill="#B89058" />
        <text x={x + 7} y={y + 3} fill="rgba(255,255,255,0.7)" fontSize="9" fontFamily="'JetBrains Mono', monospace">{label}</text>
      </g>
    ))}
    <text x="210" y="174" fill="#fff" fontSize="10" fontWeight="600" fontFamily="'Barlow Condensed', sans-serif">HQ · 8528 MARKET ST</text>
  </svg>
);

// Page Hero (interior pages)
const PageHero = ({ crumb, title, lede, bgPhoto }) => (
  <section className={`page-hero${bgPhoto ? " page-hero-photo" : ""}`} style={bgPhoto ? { backgroundImage: `url(${P(bgPhoto)})` } : null}>
    {bgPhoto && <div className="page-hero-overlay" />}
    <div className="container">
      {crumb && <div className="breadcrumb">{crumb}</div>}
      <h1>{title}</h1>
      {lede && <p className="lede">{lede}</p>}
    </div>
  </section>
);

// Expose
Object.assign(window, {
  PHONE, PHONE_HREF, ADDRESS, EMAIL,
  Icon, LogoMark, Header, CallBar, CTAStrip, Footer,
  FAQList, useReveal, HeroBackdrop, ServiceAreaMap, PageHero,
});