/* Hero — 5 variations switchable via `variant` prop (1–5) */

const HERO_PHOTO_DEFAULT = "https://images.unsplash.com/photo-1559925393-8be0ec4767c8?w=900&q=80";
const HERO_PHOTO_ALT     = "https://images.unsplash.com/photo-1521334884684-d80222895322?w=900&q=80";
const HERO_PHOTO_BAKERY  = "https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=1200&q=80";

const HERO_INDUSTRIES = [
  {
    word: "cafés",
    color: "#0F8C5F",
    photo: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=1200&q=80",   // clean latte still life
    tagline: "— open the door, find them online.",
  },
  {
    word: "bars",
    color: "#E68A19",
    photo: "https://images.unsplash.com/photo-1470337458703-46ad1756a187?w=1200&q=80",   // minimal bar with bottles
    tagline: "— the new local, on the front page.",
  },
  {
    word: "beauty clinics",
    color: "#E04E66",
    photo: "https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=1200&q=80",   // minimal linen + perfume
    tagline: "— book a treatment in one tap.",
  },
  {
    word: "boutiques",
    color: "#8B5CF6",
    photo: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1200&q=80",   // minimal hanging clothes
    tagline: "— a shop window that's always open.",
  },
  {
    word: "bakeries",
    color: "#0E7490",
    photo: "https://images.unsplash.com/photo-1568254183919-78a4f43a2877?w=1200&q=80",   // minimal bread on linen
    tagline: "— today's bake, on every search.",
  },
  {
    word: "yoga studios",
    color: "#A21CAF",
    photo: "https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=1200&q=80",     // yoga mat minimal
    tagline: "— class schedule, beautifully presented.",
  },
];

function HeroCTAs({ small }) {
  const cls = small ? "btn btn-sm" : "btn btn-lg";
  return (
    <div className="hero-ctas">
      <a href="#contact" className={cls + " btn-primary"}>
        Get a quote
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <line x1="5" y1="12" x2="19" y2="12"/>
          <polyline points="12 5 19 12 12 19"/>
        </svg>
      </a>
      <a href="#pricing" className={cls + " btn-ghost"}>See the plans</a>
    </div>
  );
}

function HeroVariant1() {
  return (
    <section className="hero hero-v1" id="top">
      <div className="container hero-grid">
        <div className="hero-text">
          <span className="eyebrow">Web design · Ireland &amp; EU</span>
          <h1>
            A <span className="h-accent">considered</span> website<br/>
            for your small business.
          </h1>
          <p className="lead">
            Two subscription plans. Hosting, domain, and SEO included. Built and maintained by a two-person studio so you can focus on the work that actually matters.
          </p>
          <HeroCTAs />
          <div className="hero-meta">
            <span>—</span>
            <span>Based in Ireland · serving businesses across the EU</span>
          </div>
        </div>
        <div className="hero-photo-wrap">
          <div className="hero-photo" style={{ backgroundImage: `url(${HERO_PHOTO_DEFAULT})` }} />
          <div className="hero-photo-chip">
            <span className="script-accent">made with care</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   V2 — Production hero
   Asymmetric two-column on desktop, stacked on mobile.
   Big floating browser mock with rotating-industry headline.
   ============================================================ */
function HeroVariant2() {
  const sectionRef = React.useRef(null);
  const [industryIdx, setIndustryIdx] = React.useState(0);

  // Rotate the industry word every 2.4s with a soft crossfade
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => {
      setIndustryIdx(i => (i + 1) % HERO_INDUSTRIES.length);
    }, 2400);
    return () => clearInterval(id);
  }, []);

  // Cursor-aware spotlight (desktop, fine pointer only)
  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return;
    let raf = 0;
    let pendingX = 50, pendingY = 30;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      pendingX = ((e.clientX - r.left) / r.width)  * 100;
      pendingY = ((e.clientY - r.top)  / r.height) * 100;
      if (!raf) raf = requestAnimationFrame(() => {
        el.style.setProperty("--mx", pendingX + "%");
        el.style.setProperty("--my", pendingY + "%");
        raf = 0;
      });
    };
    el.addEventListener("pointermove", onMove);
    return () => { el.removeEventListener("pointermove", onMove); if (raf) cancelAnimationFrame(raf); };
  }, []);

  const cur = HERO_INDUSTRIES[industryIdx];

  return (
    <section className="hero hero-v2" id="top" ref={sectionRef}>
      {/* Layered ambient background */}
      <span className="hero-orb hero-orb-a" aria-hidden="true" />
      <span className="hero-orb hero-orb-b" aria-hidden="true" />
      <span className="hero-orb hero-orb-c" aria-hidden="true" />
      <span className="hero-orb hero-orb-d" aria-hidden="true" />
      <span className="hero-orb hero-orb-e" aria-hidden="true" />
      <span className="hero-shimmer" aria-hidden="true" />
      <span className="hero-spotlight" aria-hidden="true" />
      <span className="hero-noise" aria-hidden="true" />

      <div className="container hero-v2-wrap">
        {/* ---------- LEFT: copy ---------- */}
        <div className="hero-v2-text">
          <span className="hero-v2-eyebrow">
            <span className="hero-v2-eyebrow-dot" />
            IE/COM domain with EU hosting
          </span>

          <h1 className="hero-v2-h1">
            We build websites for{" "}
            <span className="hero-v2-rotator" aria-live="polite">
              <span className="hero-v2-rotator-word" style={{color: cur.color}} key={cur.word}>
                {cur.word}
              </span>
              <span className="hero-v2-rotator-cursor" aria-hidden="true" />
            </span>
            <br/>
            and the small businesses{" "}
            <em>that make them.</em>
          </h1>

          <p className="hero-v2-lead">
            Website as a service. We design, build, and host your website — live in days, looked after for life.
          </p>

          <HeroCTAs />

          <div className="hero-v2-trust">
            <span className="hero-trust-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span><strong>Live in days</strong>, not months</span>
            <span className="hero-trust-sep" />
            <span><strong>99.9% uptime</strong> on EU servers</span>
            <span className="hero-trust-sep" />
            <span><strong>SSL, backups</strong>, security included</span>
          </div>
        </div>

        {/* ---------- RIGHT: floating browser mock ---------- */}
        <div className="hero-v2-visual">
          <div className="hero-screen">
            <div className="hero-screen-chrome">
              <span className="hero-screen-dot" style={{background: "#FF5F57"}} />
              <span className="hero-screen-dot" style={{background: "#FEBC2E"}} />
              <span className="hero-screen-dot" style={{background: "#28C840"}} />
              <span className="hero-screen-url">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                yourbusiness.ie
              </span>
            </div>
            <div className="hero-screen-photo">
              {/* Crossfading photo stack — one layer per industry, only the active is visible */}
              {HERO_INDUSTRIES.map((ind, i) => (
                <div
                  key={ind.word}
                  className={"hero-screen-layer" + (i === industryIdx ? " is-active" : "")}
                  style={{backgroundImage: `url(${ind.photo})`}}
                  aria-hidden="true"
                />
              ))}
              <div className="hero-screen-tint" aria-hidden="true" />
              <span className="hero-screen-badge" style={{background: cur.color}} key={"badge-" + cur.word}>
                <span className="hero-screen-badge-dot" />
                {cur.word.toUpperCase()}
              </span>
              <div className="hero-screen-meta" key={"meta-" + cur.word}>
                <span className="hero-screen-meta-title">Your business</span>
                <span className="hero-screen-meta-sub">{cur.tagline}</span>
              </div>
            </div>
          </div>

          {/* Floating accent chips */}
          <div className="hero-chip hero-chip-rating" aria-hidden="true">
            <span className="hero-chip-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            </span>
            <div>
              <strong>Live in days</strong>
              <span>Not months</span>
            </div>
          </div>
          <div className="hero-chip hero-chip-fast" aria-hidden="true">
            <span className="hero-chip-pulse" />
            <div>
              <strong>EU-hosted &middot; 99.9%</strong>
              <span>SSL &middot; backups &middot; secure</span>
            </div>
          </div>
        </div>
      </div>

      {/* Industry marquee */}
      <div className="hero-marquee" aria-hidden="true">
        <div className="hero-marquee-track">
          {[...Array(2)].map((_, i) => (
            <div className="hero-marquee-row" key={i}>
              {[
                ["Cafés", "☕"], ["Bars", "✦"], ["Bakeries", "🥐"], ["Beauty clinics", "✺"],
                ["Boutiques", "◆"], ["Yoga studios", "◯"], ["B&Bs", "✶"], ["Trades", "◈"],
                ["Florists", "❀"], ["Photographers", "✦"], ["Consultants", "◇"], ["Wellness", "◉"],
              ].map(([w, g]) => (
                <span className="hero-marquee-item" key={w}>
                  <span className="hero-marquee-glyph">{g}</span>
                  {w}
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroVariant3() {
  return (
    <section className="hero hero-v3" id="top">
      <div className="hero-v3-bg" style={{ backgroundImage: `url(${HERO_PHOTO_BAKERY})` }} />
      <div className="hero-v3-tint" />
      <div className="container hero-v3-inner">
        <div className="hero-v3-card">
          <span className="eyebrow">Subscription web design</span>
          <h1>
            Your business,<br/>
            <span className="h-accent">beautifully</span> online.
          </h1>
          <p className="lead">
            One monthly subscription. The website, the hosting, the SEO — all sorted.
          </p>
          <HeroCTAs />
        </div>
      </div>
    </section>
  );
}

function HeroVariant4() {
  return (
    <section className="hero hero-v4" id="top">
      <div className="hero-v4-grid">
        <div className="hero-v4-text">
          <div className="container">
            <span className="eyebrow">Sonal Studio · est. 2026</span>
            <h1>
              The two-person studio<br/>
              behind your <span className="h-accent">next website</span>.
            </h1>
            <p className="lead">
              We design, build, and look after websites for small businesses across Ireland and the EU. Two plans. Price on request. No surprises.
            </p>
            <HeroCTAs />
          </div>
        </div>
        <div className="hero-v4-art">
          <div className="hero-v4-blob" />
          <div className="hero-v4-photo" style={{ backgroundImage: `url(${HERO_PHOTO_ALT})` }} />
        </div>
      </div>
    </section>
  );
}

function HeroVariant5() {
  return (
    <section className="hero hero-v5" id="top">
      <div className="container hero-v5-inner">
        <div className="hero-v5-text">
          <span className="eyebrow">Issue No. 01 · 2026</span>
          <h1 className="hero-v5-h1">
            <span className="hero-v5-line">made</span>
            <span className="hero-v5-line">for small</span>
            <span className="hero-v5-line"><em>businesses.</em></span>
          </h1>
          <p className="lead">
            A boutique web-design studio. Two subscriptions, carefully maintained sites, the technical headaches handled.
          </p>
          <HeroCTAs />
        </div>
        <div className="hero-v5-art">
          <div className="hero-v5-circle" />
          <div className="hero-v5-photo" style={{ backgroundImage: `url(${HERO_PHOTO_DEFAULT})` }} />
          <div className="hero-v5-square" />
        </div>
      </div>
    </section>
  );
}

function Hero({ variant = 1 }) {
  switch (variant) {
    case 2: return <HeroVariant2 />;
    case 3: return <HeroVariant3 />;
    case 4: return <HeroVariant4 />;
    case 5: return <HeroVariant5 />;
    default: return <HeroVariant1 />;
  }
}

window.Hero = Hero;