// HammerHead trenchless sewer rehab feature section.
function HammerHeadWatchCard({ media, tone = "blue", main = false }) {
  return (
    <a
      className={`bl-watch-card bl-watch-card-${tone}${main ? " bl-watch-card-main" : ""}`}
      href={media.url}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={`Watch ${media.title} on YouTube`}
    >
      <img className="bl-watch-thumb" src={media.poster} alt={media.alt} loading="lazy" />
      <span className="bl-watch-scrim" aria-hidden="true" />
      <span className="bl-watch-top">
        <span>{media.kicker}</span>
        <strong>{media.duration}</strong>
      </span>
      <span className="bl-watch-play" aria-hidden="true">
        <span className="bl-play-triangle" />
      </span>
      <span className="bl-watch-bottom">
        <span>Official HammerHead media</span>
        <strong>{media.title}</strong>
        <em>Watch on YouTube</em>
      </span>
    </a>
  );
}

function BlueLight() {
  const openSewerBook = () => {
    window.dispatchEvent(new CustomEvent('cb-open-book', { detail: { problem: 'sewer' } }));
  };

  const systems = [
    {
      id: "bluelight",
      label: "SYSTEM 01",
      name: "HammerHead Bluelight LED CIPP",
      best: "Best when the sewer still has a path through it, but roots, cracks, joints, or leaks are causing trouble.",
      promise: "A resin liner becomes a new structural pipe inside the old one. HammerHead says the blue-wavelength LED cure can make a 50-foot run cure in under 12 minutes after the line is prepped.",
      stats: [
        ["No trench", "Pipe-within-a-pipe"],
        ["LED cure", "Automated pullback"],
        ["Camera", "Cure monitored live"],
        ["Range", "2-18 in. system capability"]
      ],
      media: {
        url: "https://www.youtube.com/watch?v=5fWqmyst8Mg",
        poster: "https://i.ytimg.com/vi/5fWqmyst8Mg/sddefault.jpg",
        kicker: "Bluelight LED CIPP",
        title: "Fix Broken Pipes with HammerHead BlueLight",
        duration: "2:06",
        alt: "HammerHead BlueLight LED CIPP equipment with liner material"
      },
      source: "https://www.hammerheadtrenchless.com/products/lateral-cipp/bluelight-led-cipp-system/"
    },
    {
      id: "pb30",
      label: "SYSTEM 02",
      name: "HammerHead PortaBurst PB30 / PB30X",
      best: "Best when the line is collapsed, badly broken, undersized, or needs full replacement instead of lining.",
      promise: "The PB30 family replaces 2- to 6-inch laterals with up to 30 tons of pulling force through minimal excavation, pulling new pipe in as the old pipe is burst outward.",
      stats: [
        ["30 tons", "Pulling force"],
        ["2-6 in.", "Lateral replacement"],
        ["Small pits", "Minimal excavation"],
        ["Upsize", "New HDPE path"]
      ],
      media: {
        url: "https://www.youtube.com/watch?v=4OlebR5LNaA",
        poster: "https://i.ytimg.com/vi/4OlebR5LNaA/maxresdefault.jpg",
        kicker: "PortaBurst PB30",
        title: "HammerHead PB30X Pipe Bursting",
        duration: "Demo",
        alt: "HammerHead PB30X pipe bursting equipment demonstration"
      },
      source: "https://www.hammerheadtrenchless.com/products/static-pipe-bursting-systems/lateral-bursting/"
    }
  ];

  const decisionRows = [
    ["Cracks, roots, bad joints, leaks", "Bluelight LED lining", "New pipe inside the old pipe, with the yard left alone."],
    ["Collapsed, crushed, or undersized line", "PB30 pipe bursting", "Full replacement through small access pits."],
    ["No usable pipe path or severe access issue", "Open-cut excavation", "Only when trenchless is not the honest fit."]
  ];

  const steps = [
    ["01", "Camera scope", "We inspect the line first and show you the footage before recommending a method."],
    ["02", "Clean and prep", "Roots, grease, and scale come out so the repair has the right surface/path."],
    ["03", "Choose the system", "Bluelight for lining, PB30 for replacement, excavation only when needed."],
    ["04", "Repair with proof", "We document the final line with another camera pass."]
  ];

  return (
    <section className="bluelight" id="bluelight" data-screen-label="bluelight">
      <div className="bl-shell">
        <div className="bl-hero">
          <div className="bl-copy">
            <div className="bl-mark">
              <span className="bl-beam-dot" />
              <span>HAMMERHEAD TRENCHLESS SEWER REHAB</span>
            </div>
            <h2 className="bl-title">Save the sewer line. Spare the yard.</h2>
            <p className="bl-lede">
              Clog Busterz runs two HammerHead systems for Central Kentucky sewer lines: Bluelight LED CIPP when the pipe can be lined, and PortaBurst PB30 pipe bursting when the line needs full replacement. We scope first, show you the footage, then recommend the least destructive fix that actually fits.
            </p>

            <div className="bl-hero-actions">
              <a href="tel:8594083382" className="bl-primary">
                <span>CALL FOR SEWER SCOPE</span>
                <strong>859-408-3382</strong>
              </a>
              <button className="bl-secondary" onClick={openSewerBook}>SEE IF YOUR LINE QUALIFIES</button>
            </div>

            <div className="bl-proof-strip" aria-label="HammerHead sewer rehab proof points">
              <div><strong>LED CIPP</strong><span>no-dig lining option</span></div>
              <div><strong>PB30</strong><span>small-pit replacement</span></div>
              <div><strong>CAMERA FIRST</strong><span>proof before pitch</span></div>
            </div>
          </div>

          <div className="bl-media-stack">
            <HammerHeadWatchCard media={systems[0].media} main />
            <div className="bl-equipment-mini">
              <a href={systems[0].source} target="_blank" rel="noopener noreferrer">
                <span>Bluelight LED CIPP</span>
                <strong>No-dig lining</strong>
              </a>
              <a href={systems[1].source} target="_blank" rel="noopener noreferrer">
                <span>PortaBurst PB30</span>
                <strong>Pipe bursting</strong>
              </a>
            </div>
          </div>
        </div>

        <div className="bl-systems">
          {systems.map(system => (
            <article className={`bl-system bl-system-${system.id}`} key={system.id}>
              <div className="bl-system-head">
                <span>{system.label}</span>
                <h3>{system.name}</h3>
                <p>{system.best}</p>
              </div>

              <div className="bl-system-media">
                <HammerHeadWatchCard media={system.media} tone={system.id === "pb30" ? "warm" : "blue"} />
              </div>

              <p className="bl-system-promise">{system.promise}</p>
              <div className="bl-system-stats">
                {system.stats.map(([n, l]) => (
                  <div className="bl-system-stat" key={n}>
                    <strong>{n}</strong>
                    <span>{l}</span>
                  </div>
                ))}
              </div>
              <a className="bl-source-link" href={system.source} target="_blank" rel="noopener noreferrer">
                View HammerHead source
              </a>
            </article>
          ))}
        </div>

        <div className="bl-decision">
          <div className="bl-decision-copy">
            <h3>Which repair fits your sewer?</h3>
            <p>That answer should come from the camera, not from a sales script. We diagnose the line, then show you the least destructive option that still fixes the actual failure.</p>
          </div>
          <div className="bl-decision-table">
            {decisionRows.map(([problem, method, outcome]) => (
              <div className="bl-decision-row" key={problem}>
                <div>{problem}</div>
                <strong>{method}</strong>
                <span>{outcome}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="bl-process">
          <div className="bl-process-head">
            <h3>Camera first. Trench last.</h3>
            <p>That is the Clog Busterz sewer rehab rule.</p>
          </div>
          <div className="bl-process-steps">
            {steps.map(([n, t, d]) => (
              <div className="bl-step" key={n}>
                <div className="bl-step-n">{n}</div>
                <div>
                  <div className="bl-step-t">{t}</div>
                  <div className="bl-step-d">{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="bl-bottom-cta">
          <div>
            <strong>Before anyone digs, let us scope it.</strong>
            <p>We will show you whether Bluelight, PB30, or excavation is the right play for your sewer line.</p>
          </div>
          <div className="bl-bottom-actions">
            <a href="tel:8594083382" className="bl-primary bl-primary-small">CALL 859-408-3382</a>
            <button className="bl-secondary" onClick={openSewerBook}>BOOK CAMERA SCOPE</button>
          </div>
        </div>

        <div className="bl-attribution">
          HammerHead product references and embedded videos link to HammerHead Trenchless public marketing materials. Job suitability, timeline, and excavation needs depend on the actual pipe condition confirmed by camera inspection.
        </div>
      </div>
    </section>
  );
}

window.BlueLight = BlueLight;