/* Hero — full-bleed, botanical-zine */

const Hero = () => {
  return (
    <section
      id="top"
      style={{
        position: "relative",
        minHeight: "100vh",
        padding: "clamp(80px, 12vw, 160px) var(--pad-x) clamp(40px, 6vw, 80px)",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        overflow: "hidden",
        zIndex: 2,
      }}
    >
      {/* Painted backdrop */}
      <div
        className="hero-bg"
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: "url('hero-bg.webp')",
          backgroundSize: "cover",
          backgroundPosition: "center 30%",
          zIndex: 0,
          opacity: "var(--hero-bg-opacity, 0.9)",
        }}
      />
      {/* Veil — keeps text legible against the painting */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(180deg, " +
            "color-mix(in oklab, var(--paper) 78%, transparent) 0%, " +
            "color-mix(in oklab, var(--paper) 42%, transparent) 32%, " +
            "color-mix(in oklab, var(--paper) 30%, transparent) 60%, " +
            "color-mix(in oklab, var(--paper) 78%, transparent) 92%, " +
            "var(--paper) 100%)",
          zIndex: 0,
        }}
      />
      {/* Side fade so text columns get a quieter ground */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse at 18% 50%, color-mix(in oklab, var(--paper) 55%, transparent) 0%, transparent 55%)," +
            "radial-gradient(ellipse at 90% 90%, color-mix(in oklab, var(--paper) 60%, transparent) 0%, transparent 50%)",
          zIndex: 0,
          mixBlendMode: "normal",
        }}
      />
      {/* Floating botanicals */}
      <div className="hero-art" aria-hidden="true">
        <div className="sway" style={{ position: "absolute", top: "12%", right: "6%", color: "var(--moss-2)", opacity: 0.6 }}>
          <Botanical kind="fern" size={220} stroke={1.1} />
        </div>
        <div className="sway sway-2" style={{ position: "absolute", bottom: "8%", left: "4%", color: "var(--moss)", opacity: 0.55 }}>
          <Botanical kind="sprig" size={180} stroke={1.1} />
        </div>
        <div className="sway sway-3" style={{ position: "absolute", top: "30%", left: "44%", color: "var(--accent)", opacity: 0.45 }}>
          <Botanical kind="seedhead" size={140} stroke={1} />
        </div>
        <div style={{ position: "absolute", top: "8%", left: "8%", color: "var(--ink-mute)", opacity: 0.6 }}>
          <Botanical kind="asterisk" size={36} stroke={1.2} />
        </div>
        <div style={{ position: "absolute", bottom: "18%", right: "30%", color: "var(--accent)", opacity: 0.7 }}>
          <Botanical kind="asterisk" size={20} stroke={1.4} />
        </div>
      </div>

      {/* Top meta row */}
      <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 16, position: "relative", zIndex: 2 }}>
        <div className="label">
          <span style={{ color: "var(--moss)" }}>●</span>&nbsp;&nbsp;eth3r systems · planted 2024
        </div>
        <div className="label">summer / botanical · v3.2</div>
      </div>

      {/* Main headline */}
      <div style={{ position: "relative", zIndex: 2, marginTop: "clamp(40px, 7vw, 96px)" }}>
        <div className="reveal label" style={{ marginBottom: 24 }}>// 01 · what we grow</div>
        <h1
          className="reveal display"
          style={{
            fontSize: "var(--t-display)",
            lineHeight: 0.94,
            letterSpacing: "-0.025em",
            maxWidth: "16ch",
            "--reveal-delay": "120ms",
          }}
        >
          Systems that
          <br />
          <span style={{ fontStyle: "italic", color: "var(--moss)" }}>take root</span>
          <span style={{ color: "var(--accent)" }}>.</span>
        </h1>

        <div
          className="reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.2fr)",
            gap: "clamp(24px, 4vw, 80px)",
            marginTop: "clamp(32px, 5vw, 64px)",
            alignItems: "end",
            "--reveal-delay": "240ms",
          }}
        >
          <div>
            <p style={{ fontSize: "var(--t-h3)", lineHeight: 1.35, color: "var(--ink-soft)", maxWidth: "32ch" }}>
              Digital infrastructure for businesses that need it to actually
              run. <em style={{ color: "var(--moss)" }}>Tended</em> by one
              operator. Built to last more than one season.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <a href="#systems" className="btn">
                Explore systems <span className="arrow">↘</span>
              </a>
              <a href="#contact" className="btn btn--ghost">
                Start a project <span className="arrow">→</span>
              </a>
            </div>
          </div>

          {/* Right side meta block */}
          <div
            className="mono"
            style={{
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              rowGap: 6,
              columnGap: 24,
              fontSize: 12,
              color: "var(--ink-mute)",
              borderLeft: "1px solid var(--line-2)",
              paddingLeft: 24,
              maxWidth: 440,
              justifySelf: "end",
              alignSelf: "end",
            }}
          >
            <span style={{ color: "var(--moss)" }}>OP/</span><span>operational systems</span>
            <span style={{ color: "var(--moss)" }}>DP/</span><span>digital platforms</span>
            <span style={{ color: "var(--moss)" }}>CM/</span><span>commercial media</span>
            <span style={{ color: "var(--moss)" }}>BI/</span><span>brand infrastructure</span>
            <span style={{ color: "var(--accent)", marginTop: 10 }}>::</span>
            <span style={{ color: "var(--ink)", marginTop: 10 }}>
              one operator. architect, ship, tend.
            </span>
          </div>
        </div>
      </div>

      {/* Scroll cue */}
      <div
        style={{
          position: "absolute",
          left: "var(--pad-x)",
          bottom: 12,
          fontFamily: "JetBrains Mono, monospace",
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--ink-mute)",
          display: "flex",
          alignItems: "center",
          gap: 10,
        }}
      >
        <span style={{ display: "inline-block", width: 20, height: 1, background: "currentColor" }} />
        scroll · walk the rows
      </div>
    </section>
  );
};

window.Hero = Hero;