// Hero, Trust strip, What's-included pillars.

// ---------- HERO ----------
function Hero({ heroLine2 = "In 14 days.", accentMode }) {
  const isMobile = useIsMobile();

  return (
    <section id="home" data-screen-label="01 Hero" className="shefa-pad" style={{
      position: "relative", overflow: "hidden",
      paddingTop: isMobile ? 110 : 150,
      paddingBottom: isMobile ? 64 : 100,
      background: "var(--hero-bg)",
    }}>
      <NodesBg density={isMobile ? 14 : 26} opacity={0.45} />

      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: isMobile ? "0 20px" : "0 32px",
        position: "relative", zIndex: 1,
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1.15fr 1fr",
        gap: isMobile ? 48 : 72,
        alignItems: "center",
      }}>
        <div>
          <Reveal>
            <div className="accent-bg-soft" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "8px 16px",
              background: "rgba(108,59,255,0.12)",
              border: "1px solid rgba(138,92,255,0.32)",
              borderRadius: 9999,
              color: "var(--accent-faint)",
              fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase",
              marginBottom: 28,
            }}>
              <span className="accent-dot" style={{ width: 6, height: 6, borderRadius: 999, background: "#8A5CFF", boxShadow: "0 0 10px rgba(138,92,255,0.9)" }}></span>
              Now booking · June kick-offs
            </div>
          </Reveal>

          <Reveal delay={60}>
            <h1 style={{
              fontFamily: "var(--font-display)",
              fontSize: isMobile ? 48 : 84,
              lineHeight: 0.98,
              letterSpacing: "-0.035em", fontWeight: 800,
              color: "var(--text-strong)", margin: 0, marginBottom: 28,
            }}>
              A new site.<br/>
              <span style={{
                background: accentMode === "red"
                  ? "linear-gradient(135deg,#FF4D4F 0%,#FF8B8E 60%,#fff 100%)"
                  : "linear-gradient(135deg,#8A5CFF 0%,var(--accent-faint) 60%,#fff 100%)",
                WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent",
              }}>{heroLine2}</span><br/>
              <span style={{ color: "var(--text-muted)", fontWeight: 700 }}>Live, on brand, automated.</span>
            </h1>
          </Reveal>

          <Reveal delay={120}>
            <p style={{
              fontSize: isMobile ? 16 : 19, lineHeight: 1.55, color: "var(--accent-faint)",
              margin: 0, marginBottom: 36, maxWidth: 540,
            }}>
              Strategy, design, build, launch. One fixed price. No retainer, no kick-off deck, no agency tax. We start a Monday — you launch the second Friday after.
            </p>
          </Reveal>

          <Reveal delay={180}>
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <a href="#book" className="accent-grad" style={{
                background: "linear-gradient(135deg,#6C3BFF,#8A5CFF)",
                color: "var(--text-strong)", border: 0, textDecoration: "none",
                padding: isMobile ? "14px 24px" : "16px 28px", borderRadius: 10,
                fontWeight: 600, fontSize: isMobile ? 14 : 15,
                display: "inline-flex", alignItems: "center", gap: 10,
                transition: "all 240ms var(--ease-std)",
                boxShadow: "0 0 0 rgba(108,59,255,0)",
                flex: isMobile ? "1 1 auto" : "none",
                justifyContent: "center",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.filter = "brightness(1.08)"; e.currentTarget.style.boxShadow = "0 0 32px rgba(108,59,255,0.5)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.filter = "brightness(1)"; e.currentTarget.style.boxShadow = "0 0 0 rgba(108,59,255,0)"; }}>
                Plan your launch
                <span style={{ fontSize: 14 }}>→</span>
              </a>
              <a href="#process" style={{
                background: "transparent", color: "var(--text)",
                border: "1px solid var(--line-strong)", textDecoration: "none",
                padding: isMobile ? "14px 20px" : "16px 24px", borderRadius: 10,
                fontWeight: 600, fontSize: isMobile ? 14 : 15,
                transition: "all 160ms",
                display: "inline-flex", alignItems: "center", gap: 8,
                flex: isMobile ? "1 1 auto" : "none",
                justifyContent: "center",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#8A5CFF"; e.currentTarget.style.color = "#A78BFA"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.color = "var(--text)"; }}>
                See the 14 days
              </a>
            </div>
          </Reveal>

          <Reveal delay={240}>
            <div style={{ display: "flex", gap: isMobile ? 32 : 48, marginTop: isMobile ? 48 : 64, flexWrap: "wrap" }}>
              {[
                { n: "14", l: "days, start to launch" },
                { n: "$14k", l: "fixed price · no retainer" },
                { n: "9.8/10", l: "client NPS · 40+ shipped" },
              ].map((s) => (
                <div key={s.l}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: isMobile ? 26 : 32, color: "var(--text-strong)", letterSpacing: "-0.02em" }}>{s.n}</div>
                  <div style={{ fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 6 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>

        {!isMobile && (
          <Reveal delay={120} style={{ position: "relative", aspectRatio: "1 / 1.05", maxWidth: 520, marginLeft: "auto", width: "100%" }}>
            <HeroBuild />
          </Reveal>
        )}
      </div>
    </section>
  );
}

function HeroBuild() {
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      {/* glow */}
      <div style={{
        position: "absolute", inset: "10% -8% 0 -8%",
        background: "radial-gradient(60% 60% at 50% 50%, rgba(108,59,255,0.32), transparent 70%)",
        filter: "blur(12px)",
      }}></div>

      {/* main browser card */}
      <div style={{
        position: "absolute", left: "10%", top: "20%", width: "90%", height: "72%",
        background: "var(--mockup-surface)", border: "1px solid var(--line)", borderRadius: 18,
        overflow: "hidden",
        boxShadow: "var(--mockup-shadow)",
      }}>
        <div style={{ height: 30, background: "var(--mockup-bar)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", padding: "0 14px", gap: 6 }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: "var(--line-strong)" }}></span>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: "var(--line-strong)" }}></span>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: "var(--line-strong)" }}></span>
          <span style={{ marginLeft: 18, fontSize: 10, color: "var(--mockup-faint)", fontFamily: "var(--font-mono)" }}>northwind.com</span>
          <span className="accent-dot" style={{ marginLeft: "auto", width: 6, height: 6, borderRadius: 99, background: "#8A5CFF", boxShadow: "0 0 8px rgba(138,92,255,0.9)" }}></span>
        </div>
        <div style={{ padding: 24 }}>
          <div className="accent-color" style={{ fontSize: 10, color: "#A78BFA", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginBottom: 14 }}>
            Live · Friday wk 2
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26, color: "var(--mockup-text)", letterSpacing: "-0.02em", lineHeight: 1.05, marginBottom: 14 }}>
            We make food for<br/>busy people.
          </div>
          <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
            <span className="accent-grad" style={{ background: "linear-gradient(135deg,#6C3BFF,#8A5CFF)", color: "var(--text-strong)", fontSize: 11, fontWeight: 600, padding: "7px 12px", borderRadius: 8 }}>Shop now</span>
            <span style={{ background: "transparent", color: "var(--accent-faint)", border: "1px solid var(--line-strong)", fontSize: 11, fontWeight: 600, padding: "7px 12px", borderRadius: 8 }}>Read</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <div style={{ height: 70, background: "linear-gradient(135deg, rgba(108,59,255,0.4), rgba(108,59,255,0.06))", borderRadius: 8 }}></div>
            <div style={{ height: 70, background: "linear-gradient(135deg, rgba(167,139,250,0.32), rgba(108,59,255,0.04))", borderRadius: 8 }}></div>
          </div>
        </div>
      </div>

      {/* automation float */}
      <div style={{
        position: "absolute", right: "-2%", top: "8%", width: "44%",
        background: "var(--mockup-surface)", border: "1px solid rgba(138,92,255,0.35)", borderRadius: 14,
        padding: 16,
        boxShadow: "var(--mockup-shadow)",
        animation: "shefaFloatA 7s ease-in-out infinite",
      }}>
        <div className="accent-color" style={{ fontSize: 10, color: "#A78BFA", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginBottom: 10 }}>Automation</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <span className="accent-dot" style={{ width: 8, height: 8, borderRadius: 99, background: "#8A5CFF", boxShadow: "0 0 8px rgba(138,92,255,0.9)" }}></span>
          <span style={{ fontSize: 12, color: "var(--mockup-muted)" }}>Form → CRM → Slack</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: "#A78BFA" }}></span>
          <span style={{ fontSize: 12, color: "var(--mockup-muted)" }}>Order → Receipt → Sheet</span>
        </div>
      </div>

      {/* metric float */}
      <div style={{
        position: "absolute", left: "-4%", bottom: "6%", width: "44%",
        background: "var(--mockup-surface)", border: "1px solid var(--line)", borderRadius: 14,
        padding: 18,
        boxShadow: "var(--mockup-shadow)",
        animation: "shefaFloatB 8s ease-in-out infinite",
      }}>
        <div className="accent-color" style={{ fontSize: 10, color: "#A78BFA", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginBottom: 10 }}>Conversion</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 800, color: "var(--mockup-text)", letterSpacing: "-0.02em" }}>+218%</span>
        </div>
        <div style={{ fontSize: 11, color: "var(--mockup-faint)", marginTop: 4 }}>lead-to-call rate</div>
      </div>
    </div>
  );
}

// ---------- TRUST STRIP (marquee) ----------
function TrustStrip() {
  const isMobile = useIsMobile();
  const logos = [
    { name: "NORTHWIND", weight: 700 },
    { name: "lumen",     weight: 800, italic: true },
    { name: "AXIS·HEALTH", weight: 600 },
    { name: "Mott&Co.",  weight: 700 },
    { name: "FORMA",     weight: 800 },
    { name: "kindred",   weight: 500 },
    { name: "PACE",      weight: 800 },
    { name: "halcyon",   weight: 600, italic: true },
  ];
  const row = (key) => (
    <div key={key} style={{ display: "flex", gap: isMobile ? 36 : 56, alignItems: "center", flex: "none", paddingRight: isMobile ? 36 : 56 }}>
      {logos.map((l) => (
        <span key={l.name} style={{
          fontFamily: "var(--font-display)",
          fontWeight: l.weight,
          fontSize: isMobile ? 14 : 18,
          fontStyle: l.italic ? "italic" : "normal",
          letterSpacing: l.name === l.name.toUpperCase() ? "0.05em" : "-0.01em",
          color: "var(--text-faint)",
          whiteSpace: "nowrap",
        }}>
          {l.name}
        </span>
      ))}
    </div>
  );
  return (
    <section style={{
      background: "var(--page)",
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      padding: isMobile ? "20px 0" : "28px 32px",
      overflow: "hidden",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", alignItems: "center", gap: 20, padding: isMobile ? "0 20px" : 0 }}>
        {!isMobile && (
          <div style={{ fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600, whiteSpace: "nowrap", flex: "none" }}>
            Trusted by 40+ brands ↓
          </div>
        )}
        <div style={{
          flex: 1, overflow: "hidden",
          maskImage: "linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%)",
          WebkitMaskImage: "linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%)",
        }}>
          <div style={{ display: "flex", animation: "shefaMarquee 38s linear infinite", width: "max-content" }}>
            {row("a")}
            {row("b")}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- INCLUDED (pillars) ----------
const INCLUDED = [
  {
    key: "websites",
    icon: "/assets/icon-systems.png",
    eyebrow: "01",
    title: "The site itself",
    body: "Up to 6 pages — home, about, services, work, blog index, contact. Built on Framer (default) or Next.js if you need code.",
    deliverables: ["Brand site or product page", "Reusable section system", "CMS + blog setup"],
  },
  {
    key: "automation",
    icon: "/assets/icon-automation.png",
    eyebrow: "02",
    title: "Automation layer",
    body: "Every form, calendar, and CRM hook-up wired by day 12. You walk away with workflows that don't need a human in the middle.",
    deliverables: ["Forms → CRM → Slack", "Booking + reminder flows", "Analytics + UTMs"],
  },
  {
    key: "social",
    icon: "/assets/icon-connection.png",
    eyebrow: "03",
    title: "Social hand-off",
    body: "Profile sets matched to the new site, plus a 2-week content kit so the launch lands across your channels — not just your domain.",
    deliverables: ["IG / LinkedIn profile design", "Launch content kit", "Light VA on-boarding"],
  },
  {
    key: "growth",
    icon: "/assets/icon-growth.png",
    eyebrow: "04",
    title: "Growth foundation",
    body: "Funnels and analytics installed and verified. We hand you the dashboard that tells you which lever to pull next.",
    deliverables: ["Funnel + UTMs mapped", "GA4 / Plausible / PostHog", "Loom walk-through"],
  },
];

function IncludedSection() {
  const isMobile = useIsMobile();
  return (
    <section id="included" data-screen-label="02 What's included" className="shefa-pad" style={{
      padding: isMobile ? "80px 20px" : "120px 32px", background: "var(--page)",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{
            marginBottom: isMobile ? 40 : 56,
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
            gap: isMobile ? 20 : 32,
            alignItems: "flex-end",
          }}>
            <div>
              <Eyebrow>What's in the box</Eyebrow>
              <h2 style={{
                fontFamily: "var(--font-display)",
                fontSize: isMobile ? 36 : 52,
                lineHeight: 1.05, color: "var(--text-strong)",
                letterSpacing: "-0.025em", fontWeight: 700, margin: 0, maxWidth: 760,
              }}>
                Four systems. <span style={{ color: "var(--text-muted)" }}>One launch.</span>
              </h2>
            </div>
            <p style={{ fontSize: 16, color: "var(--text-muted)", maxWidth: 380, margin: 0, lineHeight: 1.6 }}>
              Most agencies stop at the homepage. We don't — automation, social, and analytics ship in the same 14 days as the site.
            </p>
          </div>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "repeat(2,1fr)" : "repeat(4,1fr)",
          gap: isMobile ? 14 : 18,
        }}>
          {INCLUDED.map((s, i) => (
            <Reveal key={s.key} delay={i * 80}>
              <IncludedCard s={s} isMobile={isMobile} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function IncludedCard({ s, isMobile }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--surface)",
        border: hover ? "1px solid rgba(138,92,255,0.4)" : "1px solid var(--line)",
        borderRadius: 16,
        padding: isMobile ? 18 : 28,
        transition: "all 240ms var(--ease-std)",
        boxShadow: hover ? "0 0 40px rgba(108,59,255,0.22)" : "none",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        height: "100%",
        position: "relative",
      }}
    >
      <div style={{
        position: "absolute", top: isMobile ? 14 : 22, right: isMobile ? 14 : 22,
        fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)",
      }}>
        {s.eyebrow}
      </div>
      <div style={{
        width: isMobile ? 40 : 56, height: isMobile ? 40 : 56, borderRadius: 14,
        background: "linear-gradient(180deg, rgba(108,59,255,0.18), transparent 80%)",
        display: "flex", alignItems: "center", justifyContent: "center",
        marginBottom: isMobile ? 14 : 22,
      }}>
        <img src={s.icon} alt="" style={{ width: isMobile ? 26 : 36, height: isMobile ? 26 : 36, objectFit: "contain" }} />
      </div>
      <h3 style={{
        fontFamily: "var(--font-display)",
        fontSize: isMobile ? 15 : 20, fontWeight: 700, color: "var(--text-strong)", margin: 0, marginBottom: 8,
        letterSpacing: "-0.01em",
      }}>{s.title}</h3>
      {!isMobile && (
        <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-muted)", margin: 0, marginBottom: 18 }}>{s.body}</p>
      )}
      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: isMobile ? 6 : 8 }}>
        {s.deliverables.map((d) => (
          <li key={d} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: isMobile ? 11 : 13, color: "var(--accent-faint)" }}>
            <span className="accent-dot" style={{ width: 5, height: 5, borderRadius: 999, background: "#8A5CFF", flex: "none" }}></span>
            {d}
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Hero, TrustStrip, IncludedSection });