// Hero

function HeroBg() {
  return (
    <div aria-hidden style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
      {/* Soft gradient mesh */}
      <div style={{
        position: "absolute",
        top: "-20%",
        left: "-10%",
        width: "70vw",
        height: "70vw",
        background: "radial-gradient(closest-side, rgba(255,90,31,0.10), rgba(255,90,31,0) 70%)",
        filter: "blur(20px)",
        animation: "drift1 22s ease-in-out infinite alternate",
      }} />
      <div style={{
        position: "absolute",
        bottom: "-30%",
        right: "-10%",
        width: "70vw",
        height: "70vw",
        background: "radial-gradient(closest-side, rgba(10,10,10,0.07), rgba(10,10,10,0) 70%)",
        filter: "blur(20px)",
        animation: "drift2 28s ease-in-out infinite alternate",
      }} />
      {/* Grid */}
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
        <defs>
          <pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse">
            <path d="M 64 0 L 0 0 0 64" fill="none" stroke="rgba(10,10,10,0.05)" strokeWidth="1"/>
          </pattern>
          <radialGradient id="fade" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stopColor="rgba(0,0,0,0.3)"/>
            <stop offset="100%" stopColor="rgba(0,0,0,0)"/>
          </radialGradient>
          <mask id="m1"><rect width="100%" height="100%" fill="url(#fade)"/></mask>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" mask="url(#m1)"/>
      </svg>
      <style>{`
        @keyframes drift1 {
          0% { transform: translate(0,0) scale(1); }
          100% { transform: translate(8%, 4%) scale(1.1); }
        }
        @keyframes drift2 {
          0% { transform: translate(0,0) scale(1.1); }
          100% { transform: translate(-6%, -6%) scale(1); }
        }
        @keyframes floatY {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
      `}</style>
    </div>
  );
}

function FloatingCards() {
  const items = [
    { label: "More visibility", v: "+318%", k: "visibility" },
    { label: "More leads", v: "+212%", k: "leads" },
    { label: "More conversions", v: "+47%", k: "conv" },
    { label: "Better systems", v: "24/7", k: "sys" },
    { label: "Long term growth", v: "MoM", k: "growth" },
  ];
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(5, 1fr)",
        gap: 16,
        marginTop: 80,
      }}
      className="floating-cards"
    >
      {items.map((it, i) => (
        <Reveal key={it.k} delay={400 + i * 80}>
          <div
            className="card"
            style={{
              padding: "22px 22px 24px",
              borderRadius: 22,
              animation: `floatY ${5 + i * 0.4}s ease-in-out infinite`,
              animationDelay: `${i * 0.3}s`,
              minHeight: 130,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
            }}
          >
            <div className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
              <span className="idx">0{i + 1}</span>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: i === 0 ? "var(--accent)" : "var(--line-strong)" }}></span>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1 }}>{it.v}</div>
              <div style={{ marginTop: 6, fontSize: 13.5, color: "var(--muted)" }}>{it.label}</div>
            </div>
          </div>
        </Reveal>
      ))}
      <style>{`
        @media (max-width: 880px) {
          .floating-cards { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </div>
  );
}

function Hero() {
  const services = [
    "Website Development",
    "Search Engine Optimization",
    "Paid Advertising",
    "CRM Systems",
    "Sales Systems",
    "AI Automation",
    "Email & SMS Marketing",
    "Analytics & Tracking",
    "Identity Resolution",
  ];
  return (
    <section id="home" style={{ paddingTop: 140, paddingBottom: 80, position: "relative" }}>
      <HeroBg />
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <Reveal>
          <div className="eyebrow"><span className="dot"></span>Marketing + Systems + Growth</div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="h-display" style={{ marginTop: 28, maxWidth: "16ch" }}>
            More Traffic Matters.<br />
            <span style={{ color: "var(--muted-2)" }}>What Happens<br/>After Matters More.</span>
          </h1>
        </Reveal>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64 }} className="hero-grid">
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: "52ch" }}>
              Young Dev Group helps businesses create predictable growth through websites, SEO, paid advertising, CRM systems, AI automation, sales processes, follow up strategies, and growth systems designed to turn attention into customers.
            </p>
            <div className="row gap-3" style={{ marginTop: 36, flexWrap: "wrap" }}>
              <a href="#contact" className="btn btn-primary">
                Book a Strategy Call
                <span className="arrow"><ArrowUR /></span>
              </a>
              <a href="#process" className="btn btn-secondary">
                See How It Works
                <span className="arrow"><ArrowR /></span>
              </a>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <figure style={{
              margin: 0,
              padding: "32px 36px",
              borderLeft: "1px solid var(--line-strong)",
              maxWidth: 440,
              alignSelf: "end",
            }}>
              <blockquote style={{
                margin: 0,
                fontSize: "clamp(18px, 1.5vw, 22px)",
                lineHeight: 1.35,
                letterSpacing: "-0.018em",
                fontWeight: 450,
                color: "var(--ink)",
              }}>
                <span style={{ color: "var(--accent)", marginRight: 6 }}>“</span>
                Growth happens when great marketing meets great systems.
                <span style={{ color: "var(--accent)", marginLeft: 2 }}>”</span>
              </blockquote>
              <figcaption style={{ marginTop: 18, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>
                — Young Dev Group, Working Principle 01
              </figcaption>
            </figure>
          </Reveal>
        </div>
      </div>

      {/* Scrolling services marquee */}
      <div style={{ marginTop: 120, paddingTop: 36, paddingBottom: 36, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--bg-2)" }}>
        <div className="marquee">
          {[0, 1].map((k) => (
            <div className="marquee-track" key={k} aria-hidden={k === 1}>
              {Array.from({ length: 3 }).map((_, rep) => (
                <React.Fragment key={rep}>
                  {services.map((s, idx) => (
                    <React.Fragment key={`${rep}-${idx}`}>
                      <span className="marquee-item">{s}</span>
                      <span className="marquee-item"><span className="sep"></span></span>
                    </React.Fragment>
                  ))}
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;