/* Landing page — uses Backdrop variant="hero" (night cityscape + rain).
 * Layered with: live status pill, scroll-down cue, parallax on the hero image,
 * and a marquee strip of recent collaborators below the fold.
 */

const landingStyles = {
  shell: {
    position: "relative",
    minHeight: "100vh",
    width: "100%",
    overflowX: "hidden",
    background: "var(--bg-deep)",
    color: "var(--fg)",
    display: "flex",
    flexDirection: "column",
  },
  hero: {
    position: "relative",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
    overflow: "hidden",
  },
  content: {
    position: "relative",
    zIndex: 2,
    display: "flex",
    flexDirection: "column",
    flex: 1,
    minHeight: "100vh",
  },
  heroWrap: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    padding: "40px 56px 150px",
  },
  heroWrapTablet: { padding: "32px 32px 48px" },
  heroWrapMobile: { padding: "24px 20px 40px" },
  inner: {
    maxWidth: 760,
    display: "flex",
    flexDirection: "column",
    gap: 28,
    animation: "ps-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both",
  },
  innerMobile: { gap: 20 },
  livePill: {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    padding: "8px 14px 8px 12px",
    borderRadius: 999,
    background: "color-mix(in oklch, var(--bg-deep) 55%, transparent)",
    border: "1px solid var(--glass-border)",
    backdropFilter: "blur(14px) saturate(140%)",
    WebkitBackdropFilter: "blur(14px) saturate(140%)",
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--fg-dim)",
    width: "fit-content",
  },
  liveDot: {
    width: 8,
    height: 8,
    borderRadius: "50%",
    background: "var(--accent)",
    boxShadow: "0 0 0 0 color-mix(in oklch, var(--accent) 60%, transparent), 0 0 14px var(--accent)",
    animation: "ps-pulse 2.4s ease-in-out infinite",
  },
  headline: {
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
    fontWeight: 500,
    fontSize: "clamp(40px, 6.8vw, 104px)",
    lineHeight: 0.96,
    letterSpacing: "-0.038em",
    margin: 0,
    color: "var(--fg)",
    textWrap: "balance",
    textShadow: "0 2px 30px rgba(0,0,0,0.45)",
  },
  headlineMobile: {
    fontSize: "clamp(34px, 9vw, 58px)",
    lineHeight: 1,
  },
  italic: { color: "var(--accent)", fontStyle: "italic", fontWeight: 300 },
  sub: {
    fontSize: 18,
    lineHeight: 1.55,
    color: "var(--fg-dim)",
    maxWidth: 540,
    margin: 0,
    textWrap: "pretty",
    textShadow: "0 1px 18px rgba(0,0,0,0.5)",
  },
  subMobile: { fontSize: 15.5, lineHeight: 1.55 },
  ctaRow: { display: "flex", alignItems: "center", gap: 14, marginTop: 4, flexWrap: "wrap" },
  ctaRowMobile: { gap: 10, marginTop: 0, width: "100%" },
  primary: {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    background: "var(--fg)",
    color: "var(--bg)",
    border: "none",
    padding: "15px 24px",
    borderRadius: 999,
    fontFamily: "inherit",
    fontSize: 14,
    fontWeight: 500,
    letterSpacing: "0.01em",
    cursor: "pointer",
    transition: "background 180ms ease, box-shadow 220ms ease, transform 180ms ease",
    textDecoration: "none",
    boxShadow: "0 12px 30px -12px rgba(0,0,0,0.55)",
  },
  primaryMobile: { padding: "14px 22px", justifyContent: "center", flex: "1 1 auto" },
  secondary: {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    background: "color-mix(in oklch, var(--bg-deep) 35%, transparent)",
    color: "var(--fg)",
    border: "1px solid var(--glass-border)",
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    padding: "14px 22px",
    borderRadius: 999,
    fontFamily: "inherit",
    fontSize: 14,
    letterSpacing: "0.01em",
    cursor: "pointer",
    transition: "background 180ms ease, border-color 180ms ease",
  },
  secondaryMobile: { padding: "13px 18px", justifyContent: "center", flex: "1 1 auto" },
  meta: {
    display: "flex",
    alignItems: "center",
    gap: 32,
    marginTop: 24,
    paddingTop: 22,
    borderTop: "1px solid var(--line)",
    flexWrap: "wrap",
  },
  metaMobile: { gap: 18, marginTop: 16, paddingTop: 16 },
  metaItem: { display: "flex", flexDirection: "column", gap: 4 },
  metaLabel: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--fg-faint)",
  },
  metaValue: { fontSize: 14, color: "var(--fg)", letterSpacing: "0.01em" },
  metaValueMobile: { fontSize: 13 },

  scrollCue: {
    position: "absolute",
    right: 32,
    bottom: 28,
    zIndex: 3,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 10,
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.3em",
    textTransform: "uppercase",
    color: "var(--fg-dim)",
    pointerEvents: "none",
  },
  scrollLine: {
    width: 1,
    height: 40,
    background: "linear-gradient(to bottom, transparent, var(--fg-dim), transparent)",
    animation: "ps-bob 2.6s ease-in-out infinite",
  },

  /* Marquee strip — sits at the top of the hero, just under the header */
  strip: {
    position: "relative",
    zIndex: 2,
    padding: "18px 0",
    borderBottom: "1px solid var(--line)",
    background: "color-mix(in oklch, var(--bg-deep) 30%, transparent)",
    backdropFilter: "blur(6px)",
    WebkitBackdropFilter: "blur(6px)",
    overflow: "hidden",
  },
  stripMobile: { padding: "14px 0" },
  stripLabel: { display: "none" },        // no room for the visible label in the slim strip
  stripLabelMobile: { display: "none" },
  marqueeTrack: {
    display: "flex",
    gap: 64,
    width: "max-content",
    animation: "ps-marquee 38s linear infinite",
    paddingLeft: 40,
  },
  marqueeItem: {
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
    fontSize: 18,
    fontWeight: 400,
    letterSpacing: "-0.01em",
    color: "var(--fg-dim)",
    whiteSpace: "nowrap",
    display: "inline-flex",
    alignItems: "center",
    gap: 56,
  },
  marqueeItemMobile: { fontSize: 15, gap: 32 },
  marqueeDot: {
    display: "inline-block",
    width: 6,
    height: 6,
    borderRadius: "50%",
    background: "var(--accent)",
    opacity: 0.6,
  },
};

const CLIENTS = [
  "WITPERT",
  "ANDRENAHOLIC",
  "GOAT HILL ROASTERS",
  "GRADEL",
  "ROWSTRADA",
  "FULUP COFFEE",
  "PYLUS GROUP",
];

function LiveStatus({ children }) {
  return (
    <div style={landingStyles.livePill}>
      <span style={landingStyles.liveDot} aria-hidden="true" />
      <span>{children}</span>
    </div>
  );
}

function ScrollCue() {
  return (
    <div style={landingStyles.scrollCue} aria-hidden="true">
      <span>Padre 2.0</span>
      <span style={landingStyles.scrollLine} />
    </div>
  );
}

function ClientMarquee() {
  const { isMobile } = window.useViewport();
  const itemStyle = { ...landingStyles.marqueeItem, ...(isMobile ? landingStyles.marqueeItemMobile : null) };
  const row = (
    <div style={itemStyle}>
      {CLIENTS.map((c) => (
        <React.Fragment key={c}>
          <span>{c}</span>
          <span style={landingStyles.marqueeDot} aria-hidden="true" />
        </React.Fragment>
      ))}
    </div>
  );
  return (
    <div
      style={{ ...landingStyles.strip, ...(isMobile ? landingStyles.stripMobile : null) }}
      aria-label="Recent collaborators"
    >
      <span style={{ ...landingStyles.stripLabel, ...(isMobile ? landingStyles.stripLabelMobile : null) }}>
        Recent collaborators
      </span>
      <div style={landingStyles.marqueeTrack}>
        {row}
        {row}
      </div>
    </div>
  );
}

function LandingHero({ onPlayReel }) {
  const { isMobile } = window.useViewport();
  return (
    <section
      style={{
        ...landingStyles.heroWrap,
        ...(isMobile ? landingStyles.heroWrapMobile : null),
      }}
    >
      <div style={{ ...landingStyles.inner, ...(isMobile ? landingStyles.innerMobile : null) }}>
        <LiveStatus>● Now booking — Q3 / Q4 2026</LiveStatus>

        <h1 style={{ ...landingStyles.headline, ...(isMobile ? landingStyles.headlineMobile : null) }}>
          Websites, mobile apps &amp;{" "}
          <span style={landingStyles.italic}>quiet software</span> for companies
          with taste.
        </h1>

        <p style={{ ...landingStyles.sub, ...(isMobile ? landingStyles.subMobile : null) }}>
          A small independent studio for digital craft. We design and build the
          kind of products that don't announce themselves — measured, unhurried,
          and made to outlive a launch.
        </p>

        <div style={{ ...landingStyles.ctaRow, ...(isMobile ? landingStyles.ctaRowMobile : null) }}>
          <a
            href="Work.html"
            style={{ ...landingStyles.primary, ...(isMobile ? landingStyles.primaryMobile : null) }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--accent)";
              e.currentTarget.style.transform = "translateY(-1px)";
              e.currentTarget.style.boxShadow =
                "0 18px 40px -12px color-mix(in oklch, var(--accent) 50%, transparent)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "var(--fg)";
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.boxShadow =
                "0 12px 30px -12px rgba(0,0,0,0.55)";
            }}
          >
            View selected work
            <span style={{ fontSize: 16, lineHeight: 1 }} aria-hidden="true">→</span>
          </a>
          <button
            type="button"
            style={{ ...landingStyles.secondary, ...(isMobile ? landingStyles.secondaryMobile : null) }}
            onClick={onPlayReel}
            onMouseEnter={(e) => {
              e.currentTarget.style.background =
                "color-mix(in oklch, var(--bg-deep) 20%, transparent)";
              e.currentTarget.style.borderColor = "var(--fg-dim)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background =
                "color-mix(in oklch, var(--bg-deep) 35%, transparent)";
              e.currentTarget.style.borderColor = "var(--glass-border)";
            }}
          >
            <span
              aria-hidden="true"
              style={{
                width: 0,
                height: 0,
                borderTop: "5px solid transparent",
                borderBottom: "5px solid transparent",
                borderLeft: "8px solid currentColor",
                marginLeft: -2,
              }}
            />
            Watch reel · 01:48
          </button>
        </div>

        <div style={{ ...landingStyles.meta, ...(isMobile ? landingStyles.metaMobile : null) }}>
          <div style={landingStyles.metaItem}>
            <span style={landingStyles.metaLabel}>Est.</span>
            <span style={{ ...landingStyles.metaValue, ...(isMobile ? landingStyles.metaValueMobile : null) }}>
              2018 · San Antonio, TX
            </span>
          </div>
          <div style={landingStyles.metaItem}>
            <span style={landingStyles.metaLabel}>Recognition</span>
            <span style={{ ...landingStyles.metaValue, ...(isMobile ? landingStyles.metaValueMobile : null) }}>
              Pylus Group
            </span>
          </div>
          <div style={landingStyles.metaItem}>
            <span style={landingStyles.metaLabel}>Latest</span>
            <span style={{ ...landingStyles.metaValue, ...(isMobile ? landingStyles.metaValueMobile : null) }}>
              andrenaholic (2026)
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function LandingApp() {
  const { isMobile } = window.useViewport();
  const [reelOpen, setReelOpen] = React.useState(false);
  const [parallaxY, setParallaxY] = React.useState(0);

  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const y = Math.min(window.scrollY * 0.18, 120);
        setParallaxY(y);
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  return (
    <div style={landingStyles.shell}>
      <window.SkipLink />
      <section style={landingStyles.hero}>
        <window.Backdrop variant="hero" parallaxY={parallaxY} />
        <div style={landingStyles.content}>
          <window.Header active="" />
          <ClientMarquee />
          <main id="main" style={{ display: "flex", flexDirection: "column", flex: 1 }}>
            <LandingHero onPlayReel={() => setReelOpen(true)} />
          </main>
        </div>
        {!isMobile && <ScrollCue />}
      </section>
      <window.Modal open={reelOpen} onClose={() => setReelOpen(false)} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<LandingApp />);