/* Template 3 - part B: trust, offer, flow, before/after, why */
(function () {
  const e = React.createElement;
  const { useState, useRef, useEffect, useCallback } = React;
  const { fmtDate } = window;
  const Icon = window.Icon;
  const Btn = () => window.T3Btn;

  const trust = [
    ["badge", "Free assessment worth \u00a3250", "Full 3D scan, X-ray and a written plan to take away, whatever you decide."],
    ["percent", "\u00a3500 off your treatment", "Straight off the cost when you start, across aligners and braces."],
    ["sparkles", "Whitening & retainers, worth \u00a3675", "Free Boutique home whitening and retainers, included with treatment."],
    ["users", "Children & adults welcome", "Treatment for the whole family, children and adults."],
  ];
  const Trust = () =>
    e("section", { className: "t3-sec t3-cont", style: { paddingTop: 0 } },
      e("div", { className: "t3-trust__card t3-reveal" },
        trust.map(([ic, t, s], i) => e("div", { className: "t3-trust__item", key: i },
          e("span", { className: "t3-trust__ic" }, e(Icon, { name: ic })),
          e("div", null, e("div", { className: "t3-trust__t" }, t), e("div", { className: "t3-trust__s" }, s))))));

  /* offer ----------------------------------------------------------------- */
  const Offer = ({ cfg }) => {
    const B = window.T3Btn;
    const incl = [
      ["badge", "Orthodontic assessment", "With Dr Naidoo. 3D scan, OPG & full records. Worth \u00a3250.", "FREE", true],
      ["sparkles", "Boutique at-home whitening", "Professional take-home whitening. Worth \u00a3425.", "FREE", true],
      ["smile", "Upper & lower retainers", "One set each, guaranteed for a year. Worth \u00a3250.", "FREE", true],
      ["scan", "Remote monitoring", "For 32Co clear aligners, where suitable.", "INCLUDED", true],
      ["percent", "Money off your treatment", "Braces, aligners, Spark or lingual \u2013 your choice.", "-\u00a3500", true],
    ];
    return e("section", { className: "t3-sec t3-cont", id: "offer" },
      e("div", { className: "t3-offer__head" },
        e("span", { className: "t3-eyebrow" }, e("span", { className: "dot" }), "Only at the open day"),
        e("h2", { className: "t3-h2" }, "Everything below, ", e("span", { className: "alt" }, "included"), ".")),
      e("div", { className: "t3-offer__grid" },
        e("div", { className: "t3-card t3-reveal" },
          e("ul", { className: "t3-incl" },
            incl.map(([ic, t, s, pr, free], i) => e("li", { key: i },
              e("span", { className: "ic" }, e(Icon, { name: ic })),
              e("span", { className: "it" }, t, e("small", null, s)),
              e("span", { className: "pr" + (free ? " free" : "") }, pr))))),
        e("div", { className: "t3-pricecard t3-reveal" },
          e("img", { className: "t3-pricecard__leaf", src: "assets/logo-mark-leaves.png", alt: "" }),
          e("div", { className: "lbl" }, "Your open day saving"),
          e("div", { className: "now" }, "\u00a31,425"),
          e("div", { className: "mo" }, "total savings package"),
          e("div", { className: "save" }, "\u00a3500 off + \u00a3925 of extras, free"),
          e("div", { className: "fine" }, "Across braces, aligners, Spark & lingual. Free assessment, whitening and retainers with treatment booked on ", fmtDate(cfg.eventISO), "."),
          e("div", { className: "t3-pricecard__spacer" }),
          e(B, { variant: "gold", block: true, lg: true, href: "#reserve" }, "Reserve your spot"))),
    );
  };

  /* flow ------------------------------------------------------------------ */
  const Flow = ({ cfg }) => {
    const steps = [
      ["Arrive & settle in", "A warm welcome, a look around, and time to get comfortable before anything starts. No rush.", ""],
      ["Your records are taken", "Your orthodontic therapist takes a 3D scan and photographs and talks through what you're hoping to achieve.", "~30 min"],
      ["Meet Dr Saroshen Naidoo", "A clinical consultation to go through your scan, your options across aligners and braces, and every question you have.", "~20 min"],
      ["Costs & next steps", "A member of the team walks you through costs, finance and next steps. No pressure, no obligation.", ""],
      ["Secure your spot", "If it's right for you, we book your next appointment and lock in your \u00a3500 saving and package.", ""],
    ];
    return e("section", { className: "t3-sec t3-cont", id: "day" },
      e("div", { className: "t3-flow__head" },
        e("div", null,
          e("span", { className: "t3-kick" }, "What happens on the day"),
          e("h2", { className: "t3-h2", style: { marginTop: 14 } }, "Every slot is a proper ", e("span", { className: "alt" }, "appointment"), ", not a drop-in.")),
        e("p", { className: "t3-body", style: { maxWidth: 340 } }, "Doors open at 9am, last appointments at 2:30pm, with just ", cfg.slots, " spaces for the day. No waiting around \u2013 here's how the day runs.")),
      e("div", { className: "t3-flow__grid" },
        steps.map(([t, s, time], i) => e("div", { className: "t3-step t3-reveal", key: i },
          e("div", { className: "t3-step__n" }, i + 1),
          e("div", { className: "t3-step__t" }, t),
          e("div", { className: "t3-step__s" }, s),
          time && e("span", { className: "t3-step__time" }, time)))),
    );
  };

  /* before/after ---------------------------------------------------------- */
  const BeforeAfter = () =>
    e("section", { className: "t3-sec t3-cont", id: "results" },
      e("div", { className: "t3-ba__grid" },
        e("div", { className: "t3-ba__copy" },
          e("span", { className: "t3-kick" }, "Real results"),
          e("h2", { className: "t3-h2" }, "The kind of change people ", e("span", { className: "alt" }, "notice"), "."),
          e("p", { className: "t3-body" },
            "See the kind of change orthodontic treatment makes. On the day, your own 3D scan and records show exactly what's achievable for your smile.")),
        e("div", { className: "t3-baframe" },
          e("img", { src: "assets/photo-before-after.jpg", alt: "Before and after orthodontic treatment – straightened teeth" }))),
    );

  /* why ------------------------------------------------------------------- */
  const Why = ({ cfg }) => {
    const cards = [
      ["smile", "The full range, in one place", "Clear aligners, fixed metal and ceramic braces, and hidden lingual braces. You won't be steered towards one product because it's the only one we offer."],
      ["users", "Children and adults welcome", "Dr Naidoo treats the whole family, from children's early assessments through to adult treatment."],
      ["heart", "Accessible and anxiety-aware", "Our practice is fully wheelchair accessible. If you're anxious about appointments, tell us when you book and we'll have the right person ready for you."],
      ["shield", "Families who stay", "We've treated families here for years. Patients stay \u2013 and so do their children when they're old enough to come in on their own."],
    ];
    return e("section", { className: "t3-sec t3-cont" },
      e("div", { className: "t3-why__head" },
        e("span", { className: "t3-kick" }, "Why De-ientes"),
        e("h2", { className: "t3-h2", style: { marginTop: 14 } }, "Why families ", e("span", { className: "alt" }, "stay with us"), ".")),
      e("div", { className: "t3-why__grid" },
        cards.map(([ic, t, s], i) => e("div", { className: "t3-whycard t3-reveal", key: i },
          e("span", { className: "t3-whycard__ic" }, e(Icon, { name: ic })),
          e("div", { className: "t3-whycard__t" }, t),
          e("div", { className: "t3-whycard__s" }, s)))),
    );
  };

  /* gallery + video slot (after pricing) ---------------------------------- */
  const Gallery = () => {
    const shots = [
      ["photo-reception.jpg", "Our welcoming reception"],
      ["photo-consult.jpg", "Relaxed consultations"],
      ["photo-invisalign-kit.jpg", "Your free 3D scan"],
      ["photo-team-model.jpg", "A specialist-led team"],
    ];
    return e("section", { className: "t3-sec t3-cont" },
      e("div", { className: "t3-why__head" },
        e("span", { className: "t3-kick" }, "Inside the practice"),
        e("h2", { className: "t3-h2", style: { marginTop: 14 } }, "A calm, modern home for your ", e("span", { className: "alt" }, "new smile"), ".")),
      e("div", { className: "t3-gallery" },
        shots.map(([img, cap], i) => e("figure", { className: "t3-galfig t3-reveal", key: i },
          e("img", { src: "assets/" + img, alt: cap }),
          e("figcaption", null, cap)))));
  };

  const VideoSlot = ({ cfg }) => {
    const B = window.T3Btn;
    const vid = useRef(null);
    const [muted, setMuted] = useState(true);
    const toggle = () => {
      const v = vid.current; if (!v) return;
      v.muted = !v.muted;
      if (!v.muted) v.play();
      setMuted(v.muted);
    };
    return e("section", { className: "t3-sec t3-cont" },
      e("div", { className: "t3-video__grid" },
        e("div", { className: "t3-video__media t3-reveal" },
          e("video", {
            ref: vid, src: "assets/video-tour.mp4", poster: "assets/video-tour-poster.jpg",
            autoPlay: true, muted: true, loop: true, playsInline: true,
          }),
          e("button", { className: "t3-video__mute", type: "button", "aria-label": muted ? "Unmute video" : "Mute video", onClick: toggle },
            e(Icon, { name: muted ? "mute" : "volume" }))),
        e("div", null,
          e("span", { className: "t3-kick" }, "See for yourself"),
          e("h2", { className: "t3-h2", style: { margin: "14px 0 0" } }, "Sixty seconds inside De-ientes ", e("span", { className: "alt" }, cfg.location), "."),
          e("p", { className: "t3-body", style: { margin: "18px 0 24px" } },
            "Meet the team, see the 3D scanner in action, and get a feel for the day before you arrive. No surprises, just a warm welcome."),
          e(B, { variant: "light", href: "#reserve" }, "Reserve your spot"))));
  };

  /* treatment types ------------------------------------------------------- */
  const Treatments = () => {
    const opts = [
      ["smile", "Clear aligners", "Spark, Invisalign & 32co", "Removable trays changed every one to two weeks. Almost invisible, comfortable and easy to clean around. Best for mild to moderate cases, and increasingly capable of more complex ones."],
      ["chair", "Fixed braces", "Metal or ceramic", "Brackets bonded to the teeth and joined by a wire \u2013 the most predictable route for complex movement, and still the gold standard for many children's cases. Ceramic brackets offer a less visible option."],
      ["shield", "Lingual braces", "Completely hidden", "Fixed braces worn on the inside of the teeth, hidden from view. An option for adults who want the precision of fixed treatment without the visible hardware."],
      ["users", "Children's orthodontics", "Early assessment", "If your child has crowding, spacing or a developing bite problem, early assessment is valuable. Some cases benefit from early treatment; others are better once the adult teeth are in. We'll tell you clearly which applies."],
    ];
    return e("section", { className: "t3-sec t3-cont", id: "treatments" },
      e("div", { className: "t3-why__head" },
        e("span", { className: "t3-kick" }, "Your options"),
        e("h2", { className: "t3-h2", style: { marginTop: 14 } }, "Aligners, fixed or lingual \u2013 ", e("span", { className: "alt" }, "what's the difference?"))),
      e("div", { className: "t3-why__grid" },
        opts.map(([ic, t, tag, s], i) => e("div", { className: "t3-whycard t3-reveal", key: i },
          e("span", { className: "t3-whycard__ic" }, e(Icon, { name: ic })),
          e("div", { className: "t3-whycard__t" }, t, e("span", { className: "t3-whycard__tag" }, tag)),
          e("div", { className: "t3-whycard__s" }, s)))));
  };

  window.T3B = { Trust, Offer, Flow, BeforeAfter, Why, Gallery, VideoSlot, Treatments };
})();
