// Hero — asymmetric editorial. Big serif headline + product glimpse on right.
// Uses the business abstract tagline: "Everyone's private college counselor."
const Hero = () => {
  return (
    <section style={{
      position: "relative",
      minHeight: "auto",
      padding: "100px 40px 64px",
      overflow: "hidden",
      background: "var(--fog-50)",
    }}>
      {/* Ambient blobs */}
      <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0 }}>
        <div data-parallax="0.15" data-float data-float-delay="1"
             style={{ position: "absolute", top: 120, left: "8%", width: 420, height: 420,
                      background: "radial-gradient(circle, rgba(46,109,212,0.14), transparent 70%)",
                      filter: "blur(40px)" }}/>
        <div data-parallax="0.22" data-float="slow" data-float-delay="2"
             style={{ position: "absolute", bottom: 40, right: "5%", width: 520, height: 520,
                      background: "radial-gradient(circle, rgba(255,229,0,0.10), transparent 70%)",
                      filter: "blur(60px)" }}/>
        {/* Faint grid */}
        <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.25 }}>
          <defs>
            <pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse">
              <path d="M 64 0 L 0 0 0 64" fill="none" stroke="rgba(12,28,53,0.06)" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)"/>
        </svg>
      </div>

      <div style={{
        position: "relative", zIndex: 1,
        maxWidth: 980, margin: "0 auto",
        textAlign: "center",
      }}>
        {/* Centered editorial headline — vision-only landing */}
        <div>
          <h1 data-reveal="up" data-reveal-delay="140" style={{
            fontFamily: "var(--font-heading)",
            fontSize: "clamp(72px, 8vw, 128px)",
            lineHeight: 1.05,
            letterSpacing: "-0.03em",
            fontWeight: 600,
            color: "var(--navy-500)",
            margin: "0 0 36px",
          }}>
            Everyone's<br/>
            private <HandWritten color="var(--gold-500)" variant={0}>College</HandWritten><br/>
            <HandWritten color="var(--ocean-500)" variant={1}>Counselor.</HandWritten>
          </h1>
          <span data-path-anchor="center" data-path-offset-y="24" aria-hidden style={{ display: "block", height: 1 }}/>

          <div data-reveal="up" data-reveal-delay="360" style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", justifyContent: "center", marginTop: 48 }}>
            <Button variant="primary" size="lg" href="#waitlist" iconEnd={<ArrowRight size={18}/>}>
              Join the Waitlist
            </Button>
          </div>

        </div>
      </div>

    </section>
  );
};

const HeroMockups = () => (
  <div data-reveal="right" data-reveal-delay="300" style={{ position: "relative", height: 560 }}>
    {/* AI counselor chat — front */}
    <div data-float data-float-delay="1" style={{
      position: "absolute", top: 30, right: 0, width: "94%",
      background: "var(--card)", borderRadius: 22,
      border: "1px solid var(--border)",
      boxShadow: "0 30px 80px -20px rgba(12,28,53,0.25), 0 8px 20px -4px rgba(12,28,53,0.08)",
      padding: 22, zIndex: 2,
    }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
                    paddingBottom: 16, borderBottom: "1px solid var(--border)", marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10,
                        background: "linear-gradient(135deg, var(--ocean-400), var(--ocean-600))",
                        display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
            </svg>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-heading)", fontSize: 15, fontWeight: 600,
                          color: "var(--navy-500)", letterSpacing: "-0.01em" }}>
              Your counselor
            </div>
            <div style={{ fontSize: 11, color: "var(--ocean-500)", fontWeight: 600,
                          display: "flex", alignItems: "center", gap: 5 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#22C55E" }}/>
              Online · reviewing your profile
            </div>
          </div>
        </div>
        <div style={{ fontSize: 10.5, color: "var(--muted-foreground)", fontWeight: 600,
                      textTransform: "uppercase", letterSpacing: ".1em" }}>
          2:47 pm
        </div>
      </div>

      {/* Chat messages */}
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {/* Counselor msg */}
        <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
          <div style={{ width: 24, height: 24, borderRadius: 7, flexShrink: 0,
                        background: "rgba(46,109,212,0.12)", color: "var(--ocean-500)",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 11, fontWeight: 700 }}>U</div>
          <div style={{ background: "var(--fog-100)", borderRadius: "4px 14px 14px 14px",
                        padding: "10px 13px", fontSize: 13, color: "var(--navy-500)",
                        lineHeight: 1.5, maxWidth: "85%" }}>
            Based on your GPA, test scores, and interest in <b>ML research</b>, I found three programs worth a closer look.
          </div>
        </div>

        {/* Recommendation card */}
        <div style={{ marginLeft: 34, background: "linear-gradient(180deg, rgba(46,109,212,0.06), rgba(46,109,212,0.02))",
                      border: "1px solid rgba(46,109,212,0.2)", borderRadius: 14, padding: 12 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: "var(--ocean-500)",
                          letterSpacing: ".1em", textTransform: "uppercase" }}>
              Top recommendation
            </div>
            <div style={{ fontFamily: "var(--font-heading)", fontSize: 14, fontWeight: 700,
                          color: "var(--ocean-500)" }}>98% fit</div>
          </div>
          <div style={{ fontFamily: "var(--font-heading)", fontSize: 17, fontWeight: 700,
                        color: "var(--navy-500)", letterSpacing: "-0.01em", marginBottom: 4 }}>
            ETH Zurich — CS M.Sc.
          </div>
          <div style={{ fontSize: 12, color: "var(--muted-foreground)", lineHeight: 1.5, marginBottom: 10 }}>
            Strong research lab match. Rolling deadline in <b style={{ color: "var(--navy-500)" }}>47 days</b>.
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            {["Machine Learning", "Robotics", "Full funding"].map(t => (
              <div key={t} style={{ fontSize: 10.5, fontWeight: 600, padding: "4px 8px",
                                    background: "rgba(12,28,53,0.06)", color: "var(--navy-500)",
                                    borderRadius: 6 }}>{t}</div>
            ))}
          </div>
        </div>

        {/* User msg */}
        <div style={{ display: "flex", gap: 10, alignItems: "flex-start",
                      flexDirection: "row-reverse" }}>
          <div style={{ width: 24, height: 24, borderRadius: 7, flexShrink: 0,
                        background: "var(--navy-500)", color: "var(--fog-100)",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 11, fontWeight: 700 }}>S</div>
          <div style={{ background: "var(--navy-500)", color: "var(--fog-100)",
                        borderRadius: "14px 4px 14px 14px",
                        padding: "10px 13px", fontSize: 13, lineHeight: 1.5, maxWidth: "75%" }}>
            What's my biggest weakness for ETH?
          </div>
        </div>

        {/* Typing indicator */}
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <div style={{ width: 24, height: 24, borderRadius: 7, flexShrink: 0,
                        background: "rgba(46,109,212,0.12)", color: "var(--ocean-500)",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 11, fontWeight: 700 }}>U</div>
          <div style={{ background: "var(--fog-100)", borderRadius: 14,
                        padding: "10px 14px", display: "flex", gap: 4 }}>
            {[0, 1, 2].map(i => (
              <span key={i} style={{
                width: 6, height: 6, borderRadius: "50%", background: "var(--ocean-500)",
                animation: `typingDot 1.2s ease-in-out ${i * 0.15}s infinite`,
              }}/>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @keyframes typingDot {
          0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
          30% { opacity: 1; transform: translateY(-3px); }
        }
      `}</style>
    </div>

    {/* Insight card — behind, offset */}
    <div data-float="slow" data-float-delay="3" style={{
      position: "absolute", bottom: 0, left: -24, width: "72%",
      background: "var(--navy-500)", color: "var(--fog-100)",
      borderRadius: 18, padding: 22,
      boxShadow: "0 20px 50px -10px rgba(12,28,53,0.35)",
      border: "1px solid rgba(255,255,255,0.08)",
      transform: "rotate(-2.5deg)",
      zIndex: 1,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
        <div style={{ width: 26, height: 26, borderRadius: 7,
                      background: "var(--gold-500)", color: "var(--navy-500)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontSize: 14, fontWeight: 800 }}>✦</div>
        <div style={{ fontSize: 11, color: "var(--gold-500)", fontWeight: 700,
                      textTransform: "uppercase", letterSpacing: ".12em" }}>
          Weekly insight
        </div>
      </div>
      <div style={{ fontFamily: "var(--font-heading)", fontSize: 20, fontWeight: 600,
                    lineHeight: 1.25, letterSpacing: "-0.01em", marginBottom: 14 }}>
        Your profile strengthened by <span style={{ color: "var(--gold-500)" }}>14%</span> this week.
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 44, marginBottom: 12 }}>
        {[32, 38, 35, 44, 41, 52, 58, 55, 64, 68, 72, 78].map((h, i) => (
          <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: "2px 2px 0 0",
                                background: i > 8 ? "var(--gold-500)" : "rgba(255,255,255,0.25)" }}/>
        ))}
      </div>
      <div style={{ fontSize: 11.5, color: "rgba(253,252,248,0.65)", lineHeight: 1.5 }}>
        Essay quality + 2 new recommendations moved you into the top quartile for 3 target programs.
      </div>
    </div>
  </div>
);

window.Hero = Hero;