// Direction B — BOLD EXPERIMENTAL ILLUSTRATION
// Big stacked condensed display type, hard-edge geometric shapes,
// black background, single accent. Concept-led: comments visualized
// as colored streams flowing through a sentiment pipeline.
// ─────────────────────────────────────────────────────────────

const BStyles = {
  bg: "#0E0E0C",
  ink: "#F4F1EA",
  muted: "#7A7568",
  card: "#171614",
  rule: "#FFFFFF14",
};

function useBreakpoint(maxWidth) {
  const getMatch = () => typeof window !== "undefined" && window.innerWidth <= maxWidth;
  const [match, setMatch] = React.useState(getMatch);

  React.useEffect(() => {
    const onResize = () => setMatch(getMatch());
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [maxWidth]);

  return match;
}

function useBLayout() {
  const compact = useBreakpoint(980);
  const phone = useBreakpoint(640);

  return {
    compact,
    phone,
    pad: phone ? 20 : compact ? 28 : 48,
    sectionPadY: phone ? 84 : compact ? 96 : 120,
    heroPadTop: phone ? 36 : 60,
    heroPadBottom: phone ? 84 : 100,
  };
}

function BSection({ children, style, layout, id }) {
  return <section id={id} style={{ padding: `0 ${layout.pad}px`, ...style }}>{children}</section>;
}

function BNav({ accent, layout }) {
  const links = [
    ["[01] Relay", "#product"],
    ["[02] Demo", "#demo"],
    ["[03] Studio", "#studio"],
    ["[04] Pricing", "#pricing"],
  ];

  return (
    <div style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 16,
      padding: `${layout.phone ? 16 : 20}px ${layout.pad}px`,
      borderBottom: `1px solid ${BStyles.rule}`,
      position: "sticky",
      top: 0,
      background: "rgba(14,14,12,0.88)",
      zIndex: 10,
      backdropFilter: "blur(10px)",
    }}>
      <a href="#top" style={{ display: "flex", alignItems: "center", gap: 16, textDecoration: "none" }}>
        <img src="assets/lautrec-wordmark-white.png" alt="Lautrec" style={{ height: layout.phone ? 18 : 20, display: "block" }}/>
      </a>

      {!layout.phone && (
        <nav style={{
          display: "flex",
          gap: layout.compact ? 18 : 32,
          fontSize: 13,
          color: BStyles.ink,
          fontWeight: 500,
          fontFamily: "'JetBrains Mono', monospace",
          textTransform: "uppercase",
          letterSpacing: ".08em",
        }}>
          {links.map(([label, href]) => (
            <a key={label} href={href} style={{ color: "inherit", textDecoration: "none" }}>{label}</a>
          ))}
        </nav>
      )}

      <a href="mailto:hello@lautrec.co?subject=Relay%20Demo"
        style={{
          background: accent,
          color: BStyles.bg,
          border: "none",
          padding: layout.phone ? "10px 14px" : "10px 18px",
          borderRadius: 0,
          fontSize: 12,
          fontWeight: 700,
          fontFamily: "'JetBrains Mono', monospace",
          cursor: "pointer",
          textTransform: "uppercase",
          letterSpacing: ".08em",
          textDecoration: "none",
          whiteSpace: "nowrap",
        }}>
        Get Relay →
      </a>
    </div>
  );
}

function BPipeline({ accent }) {
  const [tick, setTick] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => setTick((x) => x + 1), 80);
    return () => clearInterval(timer);
  }, []);

  const streams = [
    { y: 60, color: accent, label: "FAN", speed: 1.0 },
    { y: 120, color: "#5BA8FF", label: "QUESTION", speed: 0.8 },
    { y: 180, color: "#E55858", label: "NEGATIVE", speed: 1.2 },
    { y: 240, color: "#7A7568", label: "SPAM", speed: 0.6 },
  ];

  const dots = [];
  streams.forEach((stream, streamIndex) => {
    for (let i = 0; i < 12; i += 1) {
      const offset = (tick * stream.speed + i * 70) % 800;
      dots.push({
        x: 800 - offset,
        y: stream.y,
        color: stream.color,
        key: `${streamIndex}-${i}`,
      });
    }
  });

  return (
    <svg viewBox="0 0 800 320" style={{ width: "100%", display: "block" }}>
      <text x="0" y="20" fill={BStyles.muted} fontSize="11" fontFamily="JetBrains Mono">↘ INCOMING · INSTAGRAM</text>
      <text x="800" y="20" textAnchor="end" fill={BStyles.muted} fontSize="11" fontFamily="JetBrains Mono">REPLIES SENT ↗</text>

      {streams.map((stream) => (
        <g key={stream.label}>
          <line x1="0" y1={stream.y} x2="800" y2={stream.y} stroke={BStyles.rule} strokeDasharray="2 4"/>
          <text x="0" y={stream.y - 8} fill={stream.color} fontSize="10" fontFamily="JetBrains Mono">{stream.label}</text>
        </g>
      ))}

      <rect x="340" y="40" width="120" height="220" fill={BStyles.bg} stroke={accent} strokeWidth="1.5"/>
      <text x="400" y="60" textAnchor="middle" fill={accent} fontSize="10" fontFamily="JetBrains Mono">RELAY</text>
      <text x="400" y="76" textAnchor="middle" fill={BStyles.muted} fontSize="9" fontFamily="JetBrains Mono">classifier</text>
      <line x1="354" y1="90" x2="446" y2="90" stroke={BStyles.rule}/>

      <g transform={`translate(400 165) rotate(${tick * 4})`}>
        <circle r="22" fill="none" stroke={accent} strokeWidth="1" strokeDasharray="2 4"/>
        <circle r="6" fill={accent}/>
      </g>

      {dots.map((dot) => {
        const insideBox = dot.x > 340 && dot.x < 460;
        return (
          <circle
            key={dot.key}
            cx={dot.x}
            cy={dot.y}
            r={insideBox ? 2 : 4}
            fill={dot.color}
            opacity={insideBox ? 0.4 : 1}
          />
        );
      })}

      <text x="800" y="290" textAnchor="end" fill={accent} fontSize="11" fontFamily="JetBrains Mono">+ DRAFT WRITTEN</text>
      <text x="0" y="290" fill={BStyles.muted} fontSize="11" fontFamily="JetBrains Mono">+ AVG 3.2 MIN LATENCY</text>
    </svg>
  );
}

function BHero({ accent, layout }) {
  return (
    <BSection
      id="product"
      layout={layout}
      style={{ paddingTop: layout.heroPadTop, paddingBottom: layout.heroPadBottom, position: "relative", overflow: "hidden" }}
    >
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        flexWrap: "wrap",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        textTransform: "uppercase",
        letterSpacing: ".18em",
        color: BStyles.muted,
        marginBottom: 32,
      }}>
        <span style={{ width: 6, height: 6, background: accent }}/>
        <span>Lautrec / Product 01 / Relay</span>
        {!layout.phone && <span style={{ flex: 1, height: 1, minWidth: 60, background: BStyles.rule }}/> }
        <span>v1.0.4 — shipping</span>
      </div>

      <h1 style={{
        fontFamily: "'Archivo Black', sans-serif",
        fontSize: layout.phone ? "clamp(54px, 19vw, 86px)" : "clamp(80px, 14vw, 220px)",
        lineHeight: 0.85,
        letterSpacing: "-0.045em",
        margin: 0,
        color: BStyles.ink,
        textTransform: "uppercase",
      }}>
        AN <span style={{ color: accent }}>INBOX</span><br/>
        THAT REPLIES<br/>
        <span style={{ fontFamily: "'Fraunces', serif", fontStyle: "italic", fontWeight: 300, textTransform: "lowercase", color: BStyles.muted }}>without</span> YOU.
      </h1>

      <div style={{
        marginTop: layout.phone ? 36 : 56,
        display: "grid",
        gridTemplateColumns: layout.compact ? "1fr" : "1fr 1.4fr",
        gap: layout.compact ? 28 : 64,
        alignItems: "end",
      }}>
        <p style={{
          fontSize: layout.phone ? 16 : 18,
          lineHeight: 1.55,
          color: BStyles.ink,
          margin: 0,
          maxWidth: 520,
        }}>
          Relay is a comment and DM autopilot for Instagram. It reads every incoming
          message, sorts it by sentiment, and writes the reply in your voice.
          Built by <strong style={{ color: accent, fontWeight: 600 }}>Lautrec</strong> — a studio that
          ships small software for big audiences.
        </p>

        <div style={{
          display: "flex",
          flexDirection: "column",
          gap: 12,
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12,
          color: BStyles.muted,
        }}>
          {[
            ["12,043", "creators on the waitlist"],
            ["3.2m", "median draft latency"],
            ["94%", "drafts approved as-is"],
          ].map(([value, label]) => (
            <div key={label} style={{
              display: "flex",
              justifyContent: "space-between",
              gap: 16,
              borderTop: `1px solid ${BStyles.rule}`,
              paddingTop: 8,
              flexWrap: "wrap",
            }}>
              <span style={{ color: BStyles.ink, fontWeight: 600 }}>{value}</span>
              <span>{label.toUpperCase()}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        marginTop: layout.phone ? 56 : 96,
        padding: layout.phone ? "24px 0" : "32px 0",
        borderTop: `1px solid ${BStyles.rule}`,
        borderBottom: `1px solid ${BStyles.rule}`,
      }}>
        <BPipeline accent={accent}/>
      </div>
    </BSection>
  );
}

function BLiveDemo({ accent, layout }) {
  const [comment, setComment] = React.useState("this shot is insane 🔥 where is this??");
  const [author, setAuthor] = React.useState("maxwellgrove");
  const [phase, setPhase] = React.useState("idle");
  const [result, setResult] = React.useState(null);
  const [composed, setComposed] = React.useState("");
  const tickRef = React.useRef(null);

  const run = async () => {
    if (tickRef.current) clearInterval(tickRef.current);
    setPhase("classifying");
    setResult(null);
    setComposed("");
    await new Promise((resolve) => setTimeout(resolve, 600));
    const res = await classifyAndReply(comment, `Creator handle: @${author || "maxwellgrove"}`);
    setResult(res);
    setPhase("drafting");
    let i = 0;
    tickRef.current = setInterval(() => {
      i += 1;
      setComposed(res.reply.slice(0, i));
      if (i >= res.reply.length) {
        clearInterval(tickRef.current);
        setPhase("done");
      }
    }, 28);
  };

  React.useEffect(() => () => {
    if (tickRef.current) clearInterval(tickRef.current);
  }, []);

  const sentColor = result && {
    Positive: accent,
    Neutral: BStyles.muted,
    Negative: "#E55858",
  }[result.sentiment];

  return (
    <BSection id="demo" layout={layout} style={{ paddingTop: layout.sectionPadY, paddingBottom: layout.sectionPadY }}>
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        flexWrap: "wrap",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        textTransform: "uppercase",
        letterSpacing: ".18em",
        color: BStyles.muted,
        marginBottom: 24,
      }}>
        <span>[02] Live demo</span>
        <span style={{ flex: 1, minWidth: 40, height: 1, background: BStyles.rule }}/>
        <span>browser-side classification demo</span>
      </div>

      <h2 style={{
        fontFamily: "'Archivo Black', sans-serif",
        fontSize: layout.phone ? "clamp(44px, 14vw, 68px)" : "clamp(56px, 9vw, 140px)",
        lineHeight: 0.88,
        letterSpacing: "-0.04em",
        margin: "0 0 56px",
        color: BStyles.ink,
        textTransform: "uppercase",
      }}>
        TYPE A<br/>COMMENT.<br/>
        <span style={{ color: accent }}>WATCH IT WORK.</span>
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: layout.compact ? "1fr" : "1fr 1fr",
        border: `1px solid ${BStyles.rule}`,
      }}>
        <div style={{
          padding: layout.phone ? 20 : 32,
          borderRight: layout.compact ? "none" : `1px solid ${BStyles.rule}`,
          borderBottom: layout.compact ? `1px solid ${BStyles.rule}` : "none",
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10,
            color: BStyles.muted,
            letterSpacing: ".18em",
            textTransform: "uppercase",
            marginBottom: 16,
          }}>↘ Input · Instagram comment</div>

          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
            <span style={{ color: BStyles.muted, fontFamily: "'JetBrains Mono', monospace" }}>@</span>
            <input
              value={author}
              onChange={(e) => setAuthor(e.target.value)}
              style={{
                flex: 1,
                background: "transparent",
                border: "none",
                outline: "none",
                color: BStyles.ink,
                fontSize: 14,
                fontFamily: "'JetBrains Mono', monospace",
                borderBottom: `1px solid ${BStyles.rule}`,
                padding: "8px 0",
              }}
            />
          </div>

          <textarea
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            rows="5"
            style={{
              width: "100%",
              background: BStyles.card,
              border: `1px solid ${BStyles.rule}`,
              color: BStyles.ink,
              fontSize: layout.phone ? 16 : 18,
              fontFamily: "inherit",
              padding: 16,
              outline: "none",
              resize: "vertical",
              lineHeight: 1.4,
              minHeight: 140,
            }}
          />

          <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
            {[
              "love these reels 🔥",
              "is this for sale dm me",
              "honestly mid",
              "🚀 free crypto on my page 🚀",
            ].map((text) => (
              <button
                key={text}
                onClick={() => setComment(text)}
                style={{
                  background: "transparent",
                  border: `1px solid ${BStyles.rule}`,
                  color: BStyles.muted,
                  padding: "6px 10px",
                  fontSize: 11,
                  fontFamily: "'JetBrains Mono', monospace",
                  cursor: "pointer",
                }}
              >
                "{text}"
              </button>
            ))}
          </div>

          <button
            onClick={run}
            disabled={phase === "classifying" || phase === "drafting"}
            style={{
              marginTop: 24,
              background: accent,
              color: BStyles.bg,
              border: "none",
              padding: "16px 24px",
              fontSize: 14,
              fontWeight: 700,
              fontFamily: "'JetBrains Mono', monospace",
              cursor: "pointer",
              textTransform: "uppercase",
              letterSpacing: ".1em",
              width: "100%",
              opacity: phase === "classifying" || phase === "drafting" ? 0.6 : 1,
            }}
          >
            {phase === "idle" || phase === "done"
              ? "▶ Run Relay →"
              : phase === "classifying"
                ? "● Classifying…"
                : "● Drafting…"}
          </button>
        </div>

        <div style={{ padding: layout.phone ? 20 : 32, background: BStyles.card }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10,
            color: BStyles.muted,
            letterSpacing: ".18em",
            textTransform: "uppercase",
            marginBottom: 16,
          }}>↗ Output · Relay decision</div>

          <div style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap" }}>
            {[
              ["READ", phase !== "idle"],
              ["CLASSIFY", phase === "drafting" || phase === "done"],
              ["DRAFT", phase === "done"],
            ].map(([label, active], index) => (
              <div
                key={label}
                style={{
                  flex: layout.phone ? "1 1 calc(50% - 8px)" : 1,
                  minWidth: layout.phone ? 120 : 0,
                  padding: "10px 12px",
                  background: active ? accent : "transparent",
                  color: active ? BStyles.bg : BStyles.muted,
                  border: `1px solid ${active ? accent : BStyles.rule}`,
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 10,
                  letterSpacing: ".12em",
                  textAlign: "center",
                  fontWeight: 700,
                }}
              >
                {index + 1}. {label}
              </div>
            ))}
          </div>

          <div style={{ marginBottom: 24 }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10,
              color: BStyles.muted,
              letterSpacing: ".12em",
              marginBottom: 8,
              textTransform: "uppercase",
            }}>Classification</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {result ? (
                <>
                  <div style={{
                    padding: "8px 14px",
                    background: BStyles.bg,
                    border: `1.5px solid ${accent}`,
                    color: accent,
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 13,
                    fontWeight: 700,
                    letterSpacing: ".06em",
                    textTransform: "uppercase",
                  }}>{result.bucket}</div>
                  <div style={{
                    padding: "8px 14px",
                    background: BStyles.bg,
                    border: `1px solid ${sentColor}`,
                    color: sentColor,
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 13,
                    letterSpacing: ".06em",
                    textTransform: "uppercase",
                  }}>{result.sentiment}</div>
                </>
              ) : (
                <div style={{
                  padding: "8px 14px",
                  border: `1px dashed ${BStyles.rule}`,
                  color: BStyles.muted,
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 13,
                  letterSpacing: ".06em",
                  textTransform: "uppercase",
                }}>—</div>
              )}
            </div>
          </div>

          <div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10,
              color: BStyles.muted,
              letterSpacing: ".12em",
              marginBottom: 8,
              textTransform: "uppercase",
            }}>Draft (in your voice)</div>
            <div style={{
              minHeight: 120,
              padding: 20,
              border: `1.5px solid ${phase === "done" ? accent : BStyles.rule}`,
              fontSize: layout.phone ? 18 : 22,
              lineHeight: 1.4,
              color: BStyles.ink,
              fontFamily: "'Fraunces', serif",
            }}>
              {composed || (
                phase === "idle"
                  ? <span style={{ color: BStyles.muted, fontFamily: "'JetBrains Mono', monospace", fontSize: 13 }}>// awaiting input</span>
                  : <span style={{ color: BStyles.muted, fontFamily: "'JetBrains Mono', monospace", fontSize: 13 }}>// thinking</span>
              )}
              {phase === "drafting" && (
                <span style={{
                  display: "inline-block",
                  width: 8,
                  height: 22,
                  background: accent,
                  marginLeft: 4,
                  verticalAlign: "middle",
                  animation: "bblink 1s steps(2) infinite",
                }}/>
              )}
            </div>

            {phase === "done" && (
              <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
                <button style={{
                  flex: 1,
                  minWidth: 180,
                  background: BStyles.ink,
                  color: BStyles.bg,
                  border: "none",
                  padding: "10px",
                  fontSize: 11,
                  fontWeight: 700,
                  fontFamily: "'JetBrains Mono', monospace",
                  cursor: "pointer",
                  textTransform: "uppercase",
                  letterSpacing: ".1em",
                }}>Approve & send</button>
                <button
                  onClick={run}
                  style={{
                    background: "transparent",
                    color: BStyles.ink,
                    border: `1px solid ${BStyles.rule}`,
                    padding: "10px 14px",
                    fontSize: 11,
                    fontWeight: 600,
                    fontFamily: "'JetBrains Mono', monospace",
                    cursor: "pointer",
                    textTransform: "uppercase",
                    letterSpacing: ".1em",
                  }}
                >
                  ↻ Regenerate
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </BSection>
  );
}

function BHowItWorks({ accent, layout }) {
  const steps = [
    { n: "01", title: "LISTEN", body: "Relay subscribes to account events. New comment, new DM, new tag — it knows in seconds." },
    { n: "02", title: "READ", body: "Every message is sorted into a working bucket and tagged with sentiment using your rubric." },
    { n: "03", title: "WRITE", body: "A draft is generated from your voice corpus and the chosen tone. Repeated questions answer themselves." },
    { n: "04", title: "APPROVE", body: "You only see what matters. One tap to send, one tap to escalate, one tap to mute." },
  ];

  return (
    <BSection id="method" layout={layout} style={{ paddingTop: layout.sectionPadY, paddingBottom: layout.sectionPadY }}>
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        flexWrap: "wrap",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        textTransform: "uppercase",
        letterSpacing: ".18em",
        color: BStyles.muted,
        marginBottom: 24,
      }}>
        <span>[03] Method</span>
        <span style={{ flex: 1, minWidth: 40, height: 1, background: BStyles.rule }}/>
      </div>

      <h2 style={{
        fontFamily: "'Archivo Black', sans-serif",
        fontSize: layout.phone ? "clamp(44px, 14vw, 68px)" : "clamp(56px, 9vw, 140px)",
        lineHeight: 0.88,
        letterSpacing: "-0.04em",
        margin: "0 0 64px",
        color: BStyles.ink,
        textTransform: "uppercase",
      }}>
        FOUR STEPS.<br/><span style={{ color: accent }}>ONE INBOX.</span>
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: layout.phone ? "1fr" : layout.compact ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
        gap: 1,
        background: BStyles.rule,
      }}>
        {steps.map((step) => (
          <div
            key={step.n}
            style={{
              background: BStyles.bg,
              padding: "32px 24px",
              minHeight: layout.phone ? 220 : 280,
              display: "flex",
              flexDirection: "column",
            }}
          >
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 12,
              color: accent,
              letterSpacing: ".1em",
              marginBottom: 24,
            }}>/{step.n}</div>
            <div style={{
              fontFamily: "'Archivo Black', sans-serif",
              fontSize: layout.phone ? 34 : 40,
              lineHeight: 0.95,
              letterSpacing: "-.02em",
              color: BStyles.ink,
              marginBottom: 16,
            }}>{step.title}</div>
            <div style={{ fontSize: 14, color: BStyles.muted, lineHeight: 1.5, marginTop: "auto" }}>
              {step.body}
            </div>
          </div>
        ))}
      </div>
    </BSection>
  );
}

function BFeatures({ accent, layout }) {
  const lines = [
    "AUTOPILOT DMs",
    "SENTIMENT ROUTING",
    "TONE SLIDER",
    "VOICE CORPUS",
    "APPROVAL QUEUE",
    "GUARDRAILS",
    "AUDIT LOG",
    "TEAM ROLES",
    "SLACK DIGEST",
    "API ACCESS",
  ];

  return (
    <BSection layout={layout} style={{ padding: 0, borderTop: `1px solid ${BStyles.rule}`, borderBottom: `1px solid ${BStyles.rule}` }}>
      <div style={{ display: "flex", overflow: "hidden", whiteSpace: "nowrap", padding: layout.phone ? "24px 0" : "32px 0" }}>
        <div style={{ animation: "bmarquee 40s linear infinite", display: "flex", flexShrink: 0 }}>
          {[...lines, ...lines].map((line, index) => (
            <span key={`${line}-${index}`} style={{
              fontFamily: "'Archivo Black', sans-serif",
              fontSize: layout.phone ? 34 : layout.compact ? 48 : 64,
              letterSpacing: "-.02em",
              color: index % 3 === 1 ? accent : BStyles.ink,
              padding: layout.phone ? "0 18px" : "0 32px",
              lineHeight: 1,
            }}>{line} ✦</span>
          ))}
        </div>
      </div>
    </BSection>
  );
}

function BPortfolio({ accent, layout }) {
  const products = [
    { n: "01", name: "RELAY", tag: "Comment & DM autopilot for creators", status: "LIVE" },
    { n: "02", name: "HALFTONE", tag: "Color-grade presets, served via API", status: "BETA" },
    { n: "03", name: "BACKROOM", tag: "Private newsletter for creators", status: "SOON" },
    { n: "04", name: "ATELIER", tag: "Studio operating system", status: "INTERNAL" },
  ];

  return (
    <BSection id="studio" layout={layout} style={{ paddingTop: layout.sectionPadY, paddingBottom: layout.sectionPadY }}>
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        flexWrap: "wrap",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        textTransform: "uppercase",
        letterSpacing: ".18em",
        color: BStyles.muted,
        marginBottom: 24,
      }}>
        <span>[04] Portfolio</span>
        <span style={{ flex: 1, minWidth: 40, height: 1, background: BStyles.rule }}/>
        <span>4 products / 1 studio</span>
      </div>

      <h2 style={{
        fontFamily: "'Archivo Black', sans-serif",
        fontSize: layout.phone ? "clamp(44px, 14vw, 68px)" : "clamp(56px, 9vw, 140px)",
        lineHeight: 0.88,
        letterSpacing: "-0.04em",
        margin: "0 0 56px",
        color: BStyles.ink,
        textTransform: "uppercase",
      }}>
        WE SHIP<br/>SLOW.<br/>
        <span style={{ color: accent, fontFamily: "'Fraunces', serif", fontStyle: "italic", fontWeight: 300, textTransform: "lowercase" }}>on purpose.</span>
      </h2>

      <div>
        {products.map((product) => (
          <div
            key={product.n}
            style={{
              display: "grid",
              gridTemplateColumns: layout.phone ? "1fr" : layout.compact ? "60px 1fr 120px" : "60px 280px 1fr 120px 40px",
              padding: "28px 0",
              borderTop: `1px solid ${BStyles.rule}`,
              alignItems: "center",
              gap: 16,
            }}
          >
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: accent }}>/{product.n}</div>
            <div style={{
              fontFamily: "'Archivo Black', sans-serif",
              fontSize: layout.phone ? 34 : 48,
              letterSpacing: "-.02em",
              lineHeight: 1,
              color: BStyles.ink,
            }}>{product.name}</div>
            {layout.phone ? (
              <>
                <div style={{ fontSize: 14, color: BStyles.muted }}>{product.tag}</div>
                <div style={{
                  fontSize: 11,
                  fontFamily: "'JetBrains Mono', monospace",
                  color: product.status === "LIVE" ? accent : BStyles.muted,
                  letterSpacing: ".12em",
                  fontWeight: 700,
                }}>● {product.status}</div>
              </>
            ) : (
              <>
                {layout.compact && <div style={{
                  fontSize: 11,
                  fontFamily: "'JetBrains Mono', monospace",
                  color: product.status === "LIVE" ? accent : BStyles.muted,
                  letterSpacing: ".12em",
                  fontWeight: 700,
                  textAlign: "right",
                }}>● {product.status}</div>}
                {!layout.compact && <div style={{ fontSize: 14, color: BStyles.muted }}>{product.tag}</div>}
                {!layout.compact && <div style={{
                  fontSize: 11,
                  fontFamily: "'JetBrains Mono', monospace",
                  color: product.status === "LIVE" ? accent : BStyles.muted,
                  letterSpacing: ".12em",
                  fontWeight: 700,
                }}>● {product.status}</div>}
                {!layout.compact && <Icon.arrow style={{ width: 20, height: 20, color: BStyles.ink }}/>}
              </>
            )}
            {layout.compact && !layout.phone && <div style={{ gridColumn: "2 / span 2", fontSize: 14, color: BStyles.muted }}>{product.tag}</div>}
          </div>
        ))}
        <div style={{ borderTop: `1px solid ${BStyles.rule}` }}/>
      </div>
    </BSection>
  );
}

function BPricing({ accent, layout }) {
  const plans = [
    { name: "SOLO", price: "29", bullets: ["1 IG account", "500 replies/mo", "Tone control", "Approval queue"] },
    { name: "STUDIO", price: "89", featured: true, bullets: ["3 IG accounts", "5,000 replies/mo", "Voice corpus training", "Slack digest", "Shared queue"] },
    { name: "AGENCY", price: "—", bullets: ["Unlimited accounts", "Unlimited replies", "Roles & permissions", "Audit log", "Priority support"] },
  ];

  return (
    <BSection id="pricing" layout={layout} style={{ paddingTop: layout.sectionPadY, paddingBottom: layout.sectionPadY, borderTop: `1px solid ${BStyles.rule}` }}>
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        flexWrap: "wrap",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        textTransform: "uppercase",
        letterSpacing: ".18em",
        color: BStyles.muted,
        marginBottom: 24,
      }}>
        <span>[05] Pricing</span>
        <span style={{ flex: 1, minWidth: 40, height: 1, background: BStyles.rule }}/>
        <span>monthly · cancel any time</span>
      </div>

      <h2 style={{
        fontFamily: "'Archivo Black', sans-serif",
        fontSize: layout.phone ? "clamp(44px, 14vw, 68px)" : "clamp(56px, 9vw, 140px)",
        lineHeight: 0.88,
        letterSpacing: "-0.04em",
        margin: "0 0 56px",
        color: BStyles.ink,
        textTransform: "uppercase",
      }}>
        PRICED PER<br/><span style={{ color: accent }}>REPLY SENT.</span>
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: layout.compact ? "1fr" : "repeat(3, 1fr)",
        border: `1px solid ${BStyles.rule}`,
      }}>
        {plans.map((plan, index) => (
          <div
            key={plan.name}
            style={{
              padding: layout.phone ? 24 : 32,
              background: plan.featured ? accent : BStyles.bg,
              color: plan.featured ? BStyles.bg : BStyles.ink,
              borderRight: !layout.compact && index < plans.length - 1 ? `1px solid ${plan.featured ? "#0E0E0C22" : BStyles.rule}` : "none",
              borderBottom: layout.compact && index < plans.length - 1 ? `1px solid ${plan.featured ? "#0E0E0C22" : BStyles.rule}` : "none",
            }}
          >
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11,
              letterSpacing: ".18em",
              marginBottom: 24,
              opacity: 0.7,
            }}>{plan.name}</div>
            <div style={{
              fontFamily: "'Archivo Black', sans-serif",
              fontSize: layout.phone ? 64 : 88,
              lineHeight: 0.9,
              letterSpacing: "-.04em",
              marginBottom: 32,
            }}>
              {plan.price === "—" ? "TALK" : <>${plan.price}</>}
              {plan.price !== "—" && <span style={{ fontSize: 16, opacity: 0.6, marginLeft: 4 }}>/mo</span>}
            </div>

            {plan.bullets.map((bullet) => (
              <div
                key={bullet}
                style={{
                  padding: "10px 0",
                  fontSize: 14,
                  fontFamily: "'JetBrains Mono', monospace",
                  borderTop: `1px solid ${plan.featured ? "#0E0E0C22" : BStyles.rule}`,
                  display: "flex",
                  gap: 12,
                  alignItems: "center",
                }}
              >
                <span>+</span>
                <span>{bullet}</span>
              </div>
            ))}

            <a
              href="mailto:hello@lautrec.co?subject=Relay%20Pricing"
              style={{
                marginTop: 32,
                width: "100%",
                display: "inline-block",
                textAlign: "center",
                background: plan.featured ? BStyles.bg : accent,
                color: plan.featured ? accent : BStyles.bg,
                border: "none",
                padding: "16px",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 12,
                fontWeight: 700,
                letterSpacing: ".12em",
                cursor: "pointer",
                textTransform: "uppercase",
                textDecoration: "none",
              }}
            >
              {plan.price === "—" ? "Contact us →" : "Start trial →"}
            </a>
          </div>
        ))}
      </div>
    </BSection>
  );
}

function BCaseStudy({ accent, layout }) {
  return (
    <BSection layout={layout} style={{ paddingTop: layout.sectionPadY, paddingBottom: layout.sectionPadY, borderTop: `1px solid ${BStyles.rule}` }}>
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        flexWrap: "wrap",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        textTransform: "uppercase",
        letterSpacing: ".18em",
        color: BStyles.muted,
        marginBottom: 24,
      }}>
        <span>[06] Field report</span>
        <span style={{ flex: 1, minWidth: 40, height: 1, background: BStyles.rule }}/>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: layout.compact ? "1fr" : "1.4fr 1fr",
        gap: layout.compact ? 28 : 64,
        alignItems: "start",
      }}>
        <div>
          <div style={{
            fontFamily: "'Archivo Black', sans-serif",
            fontSize: layout.phone ? 46 : 80,
            lineHeight: 0.92,
            letterSpacing: "-.03em",
            color: BStyles.ink,
            textTransform: "uppercase",
          }}>
            "USED TO LOSE<br/>
            <span style={{ color: accent }}>MONDAYS</span><br/>
            TO MY INBOX."
          </div>
          <div style={{
            marginTop: 32,
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 12,
            color: BStyles.muted,
            letterSpacing: ".06em",
          }}>
            — MAYA OKAFOR · @MAYASHOOTS · 412K
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: layout.phone ? "1fr" : "1fr 1fr",
          gap: 1,
          background: BStyles.rule,
        }}>
          {[
            ["14h→3.2m", "MED. RESPONSE"],
            ["−72%", "TIME IN APP"],
            ["+38%", "DM CONVERSION"],
            ["94%", "DRAFTS APPROVED"],
          ].map(([value, label]) => (
            <div
              key={label}
              style={{
                background: BStyles.bg,
                padding: "28px 20px",
                minHeight: 140,
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
              }}
            >
              <div style={{
                fontFamily: "'Archivo Black', sans-serif",
                fontSize: 36,
                letterSpacing: "-.02em",
                color: accent,
                lineHeight: 1,
              }}>{value}</div>
              <div style={{
                fontSize: 11,
                fontFamily: "'JetBrains Mono', monospace",
                color: BStyles.muted,
                letterSpacing: ".1em",
              }}>{label}</div>
            </div>
          ))}
        </div>
      </div>
    </BSection>
  );
}

function BFooter({ accent, layout }) {
  const footerGroups = [
    ["PRODUCTS", ["Relay", "Halftone", "Backroom", "Atelier"]],
    ["COMPANY", ["About", "Notes", "Press", "Careers"]],
    ["RESOURCES", ["Changelog", "Docs", "Status", "Privacy"]],
    ["FOLLOW", ["Twitter", "Instagram", "LinkedIn", "RSS"]],
  ];

  return (
    <>
      <BSection layout={layout} style={{ paddingTop: layout.phone ? 112 : 160, paddingBottom: layout.phone ? 112 : 160, borderTop: `1px solid ${BStyles.rule}`, textAlign: "center" }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          textTransform: "uppercase",
          letterSpacing: ".18em",
          color: BStyles.muted,
          marginBottom: 24,
        }}>
          [07] / Onboarding takes 90 seconds
        </div>
        <div style={{
          fontFamily: "'Archivo Black', sans-serif",
          fontSize: layout.phone ? "clamp(50px, 16vw, 88px)" : "clamp(80px, 16vw, 240px)",
          lineHeight: 0.85,
          letterSpacing: "-.04em",
          color: BStyles.ink,
          textTransform: "uppercase",
        }}>
          GO <span style={{ color: accent }}>OUTSIDE.</span><br/>
          WE'LL REPLY.
        </div>
        <div style={{ marginTop: 48, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a
            href="mailto:hello@lautrec.co?subject=Connect%20Instagram"
            style={{
              background: accent,
              color: BStyles.bg,
              border: "none",
              padding: "20px 32px",
              fontSize: 14,
              fontWeight: 700,
              fontFamily: "'JetBrains Mono', monospace",
              cursor: "pointer",
              textTransform: "uppercase",
              letterSpacing: ".12em",
              textDecoration: "none",
            }}
          >
            Connect Instagram →
          </a>
          <a
            href="mailto:hello@lautrec.co?subject=Book%20Relay%20Demo"
            style={{
              background: "transparent",
              color: BStyles.ink,
              border: `1px solid ${BStyles.ink}`,
              padding: "20px 32px",
              fontSize: 14,
              fontWeight: 600,
              fontFamily: "'JetBrains Mono', monospace",
              cursor: "pointer",
              textTransform: "uppercase",
              letterSpacing: ".12em",
              textDecoration: "none",
            }}
          >
            Book demo
          </a>
        </div>
      </BSection>

      <footer style={{
        padding: `${layout.phone ? 32 : 48}px ${layout.pad}px 24px`,
        borderTop: `1px solid ${BStyles.rule}`,
        display: "grid",
        gridTemplateColumns: layout.phone ? "1fr" : layout.compact ? "repeat(2, 1fr)" : "2fr 1fr 1fr 1fr 1fr",
        gap: 32,
      }}>
        <div>
          <img src="assets/lautrec-wordmark-white.png" alt="Lautrec" style={{ height: 22, display: "block" }}/>
          <div style={{
            marginTop: 16,
            fontSize: 11,
            color: BStyles.muted,
            fontFamily: "'JetBrains Mono', monospace",
            lineHeight: 1.6,
            letterSpacing: ".04em",
          }}>
            Lautrec Corp · Seoul, Korea<br/>
            manager@lautrec.kr
          </div>
        </div>

        {footerGroups.map(([heading, links]) => (
          <div key={heading}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10,
              letterSpacing: ".18em",
              color: accent,
              marginBottom: 16,
            }}>{heading}</div>
            {links.map((link) => (
              <div key={link} style={{
                fontSize: 13,
                color: BStyles.ink,
                padding: "5px 0",
                fontFamily: "'JetBrains Mono', monospace",
                letterSpacing: ".04em",
              }}>{link}</div>
            ))}
          </div>
        ))}
      </footer>

      <div style={{
        padding: `20px ${layout.pad}px`,
        borderTop: `1px solid ${BStyles.rule}`,
        display: "flex",
        justifyContent: "space-between",
        gap: 12,
        flexWrap: "wrap",
        fontSize: 10,
        fontFamily: "'JetBrains Mono', monospace",
        color: BStyles.muted,
        letterSpacing: ".12em",
      }}>
        <span>© Lautrec Corp.</span>
        <span style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
          <span><span style={{ color: accent }}>●</span> ALL SYSTEMS NOMINAL</span>
          <span>RELAY V1.0.4</span>
        </span>
      </div>
    </>
  );
}

function DirectionB({ accent }) {
  const layout = useBLayout();

  return (
    <div
      id="top"
      style={{
        background: BStyles.bg,
        color: BStyles.ink,
        fontFamily: "'Archivo', sans-serif",
        width: "100%",
        minHeight: "100%",
      }}
    >
      <style>{`
        @keyframes bblink { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }
        @keyframes bmarquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
      `}</style>
      <BNav accent={accent} layout={layout}/>
      <BHero accent={accent} layout={layout}/>
      <BLiveDemo accent={accent} layout={layout}/>
      <BHowItWorks accent={accent} layout={layout}/>
      <BFeatures accent={accent} layout={layout}/>
      <BPortfolio accent={accent} layout={layout}/>
      <BCaseStudy accent={accent} layout={layout}/>
      <BPricing accent={accent} layout={layout}/>
      <BFooter accent={accent} layout={layout}/>
    </div>
  );
}

window.DirectionB = DirectionB;