/* global React, Shot, Reveal */

/* ============================ CUSTOM BUILDS ============================ */
const CUSTOM_SERVICES = [
  ["Custom vessel design", "Clean-sheet hull and deck design, drawn on CAD to your brief."],
  ["Commercial vessels", "Work platforms, charter and patrol craft built to survey."],
  ["Recreational vessels", "Sport-fishers, cruisers and day boats with a point of view."],
  ["Custom owner builds", "One-off craft for owners who want something that exists nowhere else."],
  ["Hull development", "Hull-form research, tank-tested thinking, real-world refinement."],
  ["Marine engineering", "Structural, rigging and systems engineering for new and existing builds."],
];

function Custom() {
  return (
    <section className="section custom" id="custom">
      <div className="custom__bg"></div>
      <div className="wrap">
        <div className="custom__head">
          <Reveal><div className="eyebrow">05 — Custom Designs &amp; Builds</div></Reveal>
          <Reveal delay={1}><h2 className="display custom__title">Beyond the<br /><span className="accent">Nemesis.</span></h2></Reveal>
          <Reveal delay={2}><p className="lead">The Nemesis 2200 is what happens when a fisherman designs his own boat.
            It is not the only thing Bromley Marine Designs can draw. For owners who want something
            completely their own, the studio takes on a small number of custom commissions each year.</p></Reveal>
        </div>
        <div className="custom__grid">
          {CUSTOM_SERVICES.map(([t, d], i) => (
            <Reveal key={t} delay={(i % 3) + 1} className="svc">
              <div className="svc__n mono">0{i + 1}</div>
              <h3 className="h-md svc__t">{t}</h3>
              <p className="muted svc__d">{d}</p>
            </Reveal>
          ))}
        </div>
        <Reveal className="custom__cta">
          <p className="muted">An exclusive service — strictly limited availability.</p>
          <a href="#contact" onClick={(e) => { e.preventDefault(); document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" }); }} className="btn btn-ghost">Discuss a Custom Vessel<span className="arr">→</span></a>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================ WHY BROMLEY ============================ */
const WHY_PILLARS = [
  ["Modern thinking", "CAD-driven design, not hand-me-down moulds."],
  ["Real water, real miles", "Drawn by someone who fishes the conditions he designs for."],
  ["Performance-driven", "Every line earns its place in speed, ride or sea-keeping."],
  ["Proudly South African", "Built for our coast, our launches, our distances."],
];

function Why() {
  return (
    <section className="section why" id="why">
      <div className="wrap why__wrap">
        <Reveal className="why__media">
          <Shot src="assets/alex-helm.jpg" pos="center 30%" ratio="3 / 4" label="Alexander Bromley — designer, Nemesis 2200" code="THE FOUNDER" />
          <div className="why__cap mono">Alexander Bromley · Designer</div>
        </Reveal>
        <div className="why__body">
          <Reveal><div className="eyebrow">06 — Why Bromley</div></Reveal>
          <Reveal delay={1}><h2 className="h-xl">“I wanted a boat that didn't&nbsp;exist,<br />so I designed one.”</h2></Reveal>
          <Reveal delay={2} className="why__story">
            <p>Alexander Bromley grew up in Cape Town surrounded by all things nautical. His father, Mike,
              was heavily involved in ocean yacht racing and long-distance races and deliveries — so it
              wasn't surprising that Alex started boating, in all its formats, from an early age.</p>
            <p>After a stint working for a premier boat builder in Cape Town, he got the opportunity to
              crew on a sportfisher targeting marlin up the east coast of South Africa, all the way to
              Bazaruto in the north. It was this experience that taught the young yachtsman the
              intricacies of big-game sport fishing.</p>
            <p>Determined to build his own offshore fishing craft, Alex researched boat building and
              design — including studying through the Westlawn Institute of Marine Technology in the USA.
              Using CAD systems and his acquired knowledge, he generated the hull shape for Nemesis.</p>
          </Reveal>
          <div className="why__pillars">
            {WHY_PILLARS.map(([t, d], i) => (
              <Reveal key={t} delay={(i % 4) + 1} className="pillar">
                <h3 className="pillar__t">{t}</h3>
                <p className="muted pillar__d">{d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ TESTIMONIALS ============================ */
const TESTI = [
  {
    quote: "I was hugely impressed with the Nemesis 2200. I spent a lot of effort trying to find fault with her. She came out tops.",
    name: "Erwin Bursik", role: "Boat test, SKI-BOAT Magazine", real: true, scene: "scene-ocean",
  },
  {
    quote: "She climbs onto the plane without the big bow-lift you expect. In a Cape chop she just stays soft and dry.",
    name: "Owner testimonial", role: "Add a real owner quote here", real: false, scene: "scene-storm",
  },
  {
    quote: "We tow it to Moçambique behind the bakkie and fish straight off the slipway. It does everything we ask.",
    name: "Owner testimonial", role: "Add a real owner quote here", real: false, scene: "scene-dawn",
  },
];

function Testimonials() {
  const [i, setI] = useState(0);
  const t = TESTI[i];
  return (
    <section className="section testi">
      <div className="wrap">
        <Reveal><div className="eyebrow">07 — From the Water</div></Reveal>
        <div className="testi__stage">
          <Reveal className="testi__media">
            <Shot scene={t.scene} ratio="1 / 1" label="owner & boat — drop image" code={`0${i + 1}`} />
          </Reveal>
          <div className="testi__content">
            <blockquote className="testi__quote h-lg">“{t.quote}”</blockquote>
            <div className="testi__by">
              <span className="testi__name">{t.name}</span>
              <span className="testi__role mono">{t.role}{!t.real && " · sample"}</span>
            </div>
            <div className="testi__nav">
              {TESTI.map((_, k) => (
                <button key={k} className={`dot ${k === i ? "on" : ""}`} onClick={() => setI(k)} aria-label={`Testimonial ${k + 1}`}></button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Custom, Why, Testimonials });