/* DockHub — section components. All globals attached to window for cross-file scope. */

const { useEffect, useRef, useState } = React;

/* Tiny utility: IntersectionObserver-based reveal */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ---------- Nav ---------- */
function BrandMark({ size = 26, stroke = 5 }) {
  // Manifold — three feeders converging into a teal hub, single outbound.
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none"
         stroke="currentColor" strokeWidth={stroke}
         strokeLinecap="square" strokeLinejoin="miter" aria-hidden="true">
      <path d="M 14 24 L 46 50" />
      <path d="M 14 50 L 46 50" />
      <path d="M 14 76 L 46 50" />
      <rect x="8"  y="20" width="8" height="8" fill="currentColor" stroke="none" />
      <rect x="8"  y="46" width="8" height="8" fill="currentColor" stroke="none" />
      <rect x="8"  y="72" width="8" height="8" fill="currentColor" stroke="none" />
      <rect x="46" y="42" width="16" height="16" fill="var(--accent)" stroke="none" />
      <line x1="62" y1="50" x2="86" y2="50" stroke="var(--accent)" />
      <polyline points="80,44 86,50 80,56" stroke="var(--accent)" fill="none" />
    </svg>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="container nav__row">
        <a href="#top" className="brand" aria-label="DockHub home">
          <BrandMark size={26} stroke={6} />
          <span className="brand__word">Dock<span className="brand__word-accent">Hub</span></span>
        </a>
        <div className="nav__links">
          <a href="#problem">The Problem</a>
          <a href="#how">How It Works</a>
          <a href="#build">What We Build</a>
          <a href="#why">Why DockHub</a>
        </div>
        <a href="#contact" className="nav__cta">Book Assessment →</a>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  const ref = useReveal();
  return (
    <section id="top" className="hero" ref={ref}>
      <div className="hero__grid" aria-hidden="true"></div>
      <div className="hero__glow" aria-hidden="true"></div>
      <div className="container hero__inner">
        <div>
          <div className="hero__eyebrow reveal">
            <span className="dot"></span>
            <span>AI for U.S. freight forwarders &amp; customs brokers</span>
          </div>
          <h1 className="hero__title reveal reveal-delay-1">
            Custom AI,<br />built for <em>your</em> freight operation.
          </h1>
          <p className="hero__sub reveal reveal-delay-2">
            We embed directly into how your business already runs — mapping your workflows,
            identifying where time and revenue are slipping, and building AI infrastructure
            that fixes it. No generic software. No rip and replace. Built for you.
          </p>
          <div className="reveal reveal-delay-3">
            <a href="#contact" className="btn">
              Book a Free Workflow Assessment
              <span className="arrow">↗</span>
            </a>
          </div>
        </div>
        <aside className="hero__side reveal reveal-delay-4">
          <div><strong>What we do</strong></div>
          <div>Boutique AI consultancy embedding into freight operations across the U.S.</div>
        </aside>
      </div>
    </section>
  );
}

/* ---------- Ticker (subtle data band under hero) ---------- */
function Ticker() {
  const items = [
    "Carrier invoice reconciliation",
    "Customer billing audits",
    "Automated collections",
    "Document extraction → TMS",
    "Cross-document customs validation",
    "Track &amp; trace updates",
    "Quote / RFQ automation",
    "Wallet share expansion",
  ];
  // duplicate for seamless loop
  const loop = [...items, ...items];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker__track">
        {loop.map((t, i) => (
          <span key={i} dangerouslySetInnerHTML={{ __html: t }} />
        ))}
      </div>
    </div>
  );
}

/* ---------- Problem ---------- */
function Problem() {
  const ref = useReveal();
  const leaks = [
    "Documents processed by hand",
    "Invoices never reconciled",
    "Quotes that go out late — or not at all",
    "Shipments nobody's tracking",
    "Surcharges that never hit the invoice",
  ];
  return (
    <section id="problem" className="section" ref={ref}>
      <div className="container">
        <header className="section__head">
          <div className="section__num reveal">01 / The Problem</div>
          <h2 className="section__title reveal reveal-delay-1">
            Your operation is leaking — and you probably know it.
          </h2>
        </header>

        <div className="leak-grid">
          <div className="leak-prose reveal reveal-delay-1">
            <p>
              Manual document processing. Invoices that don't get reconciled.
              Quotes that go out late or not at all. Shipments nobody's tracking
              until <span className="mark">the customer calls</span>.
            </p>
            <p>
              Most freight forwarders are running on spreadsheets, inbox chaos,
              and institutional knowledge held together by people who are already
              stretched thin. Generic software doesn't fix this — it just adds
              another tool nobody has time to learn.
            </p>
          </div>

          <div className="leak-list reveal reveal-delay-2">
            {leaks.map((l, i) => (
              <div className="leak-list__item" key={i}>
                <span className="idx">{String(i + 1).padStart(2, "0")}</span>
                <span className="label">{l}</span>
                <span className="pulse" aria-hidden="true"></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- How It Works ---------- */
function HowItWorks() {
  const ref = useReveal();
  const steps = [
    {
      n: "Step 01",
      title: "We map your operation",
      body:
        "We start with a free workflow assessment. We want to understand exactly how your business runs — where documents come in, how they're processed, where things fall through the cracks.",
    },
    {
      n: "Step 02",
      title: "We build custom AI",
      body:
        "No off-the-shelf tools. We build AI workflows specific to your operation — embedded into your existing email, TMS, and communication channels.",
    },
    {
      n: "Step 03",
      title: "You run leaner and faster",
      body:
        "Less manual work. Fewer errors. Revenue that was slipping through the cracks, recovered. Your team focused on freight, not admin.",
    },
  ];
  return (
    <section id="how" className="section" ref={ref}>
      <div className="container">
        <header className="section__head">
          <div className="section__num reveal">02 / How It Works</div>
          <h2 className="section__title reveal reveal-delay-1">
            We build around you, not the other way around.
          </h2>
        </header>
      </div>
      <div className="container">
        <div className="steps">
          {steps.map((s, i) => (
            <div className={`step reveal reveal-delay-${i + 1}`} key={i}>
              <div className="step__num">{s.n}</div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
              <div className="step__rule" aria-hidden="true"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- What We Build ---------- */
function CapIcon({ kind }) {
  // Simple geometric icons — squares, arrows, dots. No AI clichés.
  const common = { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "reconcile":
      return (
        <svg {...common}>
          <rect x="2" y="3" width="6" height="12" rx="1" />
          <rect x="10" y="3" width="6" height="12" rx="1" />
          <path d="M8 9h2" />
        </svg>
      );
    case "audit":
      return (
        <svg {...common}>
          <path d="M3 3h12v12H3z" />
          <path d="M6 7h6M6 10h6M6 13h3" />
        </svg>
      );
    case "collect":
      return (
        <svg {...common}>
          <circle cx="9" cy="9" r="6" />
          <path d="M9 5v4l3 2" />
        </svg>
      );
    case "extract":
      return (
        <svg {...common}>
          <path d="M3 3h7l3 3v9H3z" />
          <path d="M10 3v3h3" />
          <path d="M6 11h6" />
        </svg>
      );
    case "validate":
      return (
        <svg {...common}>
          <path d="M3 9l3 3 6-7" />
          <path d="M3 14h12" />
        </svg>
      );
    case "track":
      return (
        <svg {...common}>
          <circle cx="4" cy="9" r="1.6" />
          <circle cx="14" cy="9" r="1.6" />
          <path d="M5.6 9h6.8" />
          <path d="M9 5v8" />
        </svg>
      );
    case "quote":
      return (
        <svg {...common}>
          <path d="M3 4h12v8H8l-3 3v-3H3z" />
        </svg>
      );
    case "prospect":
      return (
        <svg {...common}>
          <path d="M3 15l5-5 3 3 4-6" />
          <path d="M11 7h4v4" />
        </svg>
      );
    default:
      return <svg {...common}><circle cx="9" cy="9" r="3" /></svg>;
  }
}

function WhatWeBuild() {
  const ref = useReveal();
  const caps = [
    { t: "Carrier invoice reconciliation & overbilling detection", k: "reconcile" },
    { t: "Customer billing audits — surcharges that never made the invoice", k: "audit" },
    { t: "Document extraction & TMS auto-population", k: "extract" },
    { t: "Cross-document validation before customs submission", k: "validate" },
    { t: "Automated track & trace customer updates", k: "track" },
    { t: "Quote generation & RFQ response automation", k: "quote" },
  ];
  return (
    <section id="build" className="section" ref={ref}>
      <div className="container">
        <header className="section__head">
          <div className="section__num reveal">03 / What We Build</div>
          <div>
            <h2 className="section__title reveal reveal-delay-1">
              A few of our offerings.
            </h2>
            <p className="lede reveal reveal-delay-2" style={{ marginTop: 18 }}>
              Every engagement starts with understanding your operation. These are
              some of the solutions we've deployed.
            </p>
          </div>
        </header>
      </div>
      <div className="container">
        <div className="caps reveal reveal-delay-2">
          {caps.map((c, i) => (
            <div className="cap" key={i}>
              <div className="cap__icon" aria-hidden="true">
                <CapIcon kind={c.k} />
              </div>
              <h3 className="cap__title">{c.t}</h3>
              <span className="cap__num">{String(i + 1).padStart(2, "0")}</span>
            </div>
          ))}
        </div>
        <div className="caps__note reveal reveal-delay-3">
          Don't see your problem here? Tell us how your operation runs — we'll figure it out together.
        </div>
      </div>
    </section>
  );
}

/* ---------- Why DockHub ---------- */
function Why() {
  const ref = useReveal();
  const rows = [
    { in: "You forward us a document", out: "We send back structured data" },
    { in: "You get an RFQ", out: "We respond in seconds" },
    { in: "You move freight", out: "Everything else runs in the background" },
  ];
  return (
    <section id="why" className="section why" ref={ref}>
      <div className="container">
        <header className="section__head">
          <div className="section__num reveal">04 / Why DockHub</div>
          <div className="exchange reveal reveal-delay-1" style={{ maxWidth: 720 }}>
            <div className="ex-header">
              <div>You send</div>
              <div></div>
              <div>We return</div>
            </div>
            {rows.map((r, i) => (
              <div className="ex-row" key={i}>
                <div className="ex-cell ex-cell--in">{r.in}</div>
                <div className="ex-arrow" aria-hidden="true"></div>
                <div className="ex-cell ex-cell--out">{r.out}</div>
              </div>
            ))}
          </div>
        </header>
      </div>
    </section>
  );
}

/* ---------- CTA / Contact ---------- */
function CTA() {
  const ref = useReveal();
  return (
    <section id="contact" className="section cta" ref={ref}>
      <div className="container">
        <header className="section__head">
          <div className="section__num reveal">05 / Start</div>
          <h2 className="section__title reveal reveal-delay-1">
            Start with a <em>conversation</em>.
          </h2>
        </header>

        <div className="cta__inner">
          <div>
            <p className="cta__lede reveal reveal-delay-1">
              Tell us how your operation runs. We'll identify exactly where AI
              can recover time and revenue — no pitch, no pressure.
            </p>
            <div className="cta__actions">
              <a href="https://calendly.com/akash-dockhub/30min?month=2026-05" target="_blank" rel="noopener noreferrer" className="btn reveal reveal-delay-2">
                Book a Free Workflow Assessment
                <span className="arrow">↗</span>
              </a>
              <div className="cta__email reveal reveal-delay-3">
                Or email us directly at{" "}
                <a href="mailto:akash@dockhub.ai">akash@dockhub.ai</a>
              </div>
            </div>
          </div>

          <div className="cta__card reveal reveal-delay-2">
            <div className="cta__card-head">
              <span className="dot" aria-hidden="true"></span>
              <span>The Workflow Assessment</span>
            </div>
            <ul>
              <li><span>Duration</span><span>~45 minutes</span></li>
              <li><span>Format</span><span>Video call, your team</span></li>
              <li><span>Output</span><span>Map of leak points</span></li>
              <li><span>Cost</span><span>Free</span></li>
              <li><span>Next step</span><span>Only if it makes sense</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container" style={{ display: "flex", justifyContent: "space-between", width: "100%", flexWrap: "wrap", gap: 12 }}>
        <span>DockHub © 2026</span>
        <span>akash@dockhub.ai</span>
      </div>
    </footer>
  );
}

/* expose */
Object.assign(window, { Nav, Hero, Ticker, Problem, HowItWorks, WhatWeBuild, Why, CTA, Footer });