/* global React */
/* A wall of flirty design double-entendres.
   Each line: the cheeky claim + a small mono "translation" grounding it back in design. */

function PillowTalk() {
  const lines = [
    { line: ["We love", "restraints", "."],           mono: "We mean constraints. Tight grids. Smaller palettes. Tighter outcomes." },
    { line: ["Let's start with the", "behind", " end."], mono: "Backend. Infra. The foundation. We don't paint over the rust." },
    { line: ["We're into a healthy", "threesome", "."],  mono: "Design + development + marketing. Same room. From day one." },
    { line: ["Slow hands.", "Fast launches", "."],      mono: "80% of the work is the decisions before the build. Ship day is the easy part." },
    { line: ["We don't do", "quickies", ". Mostly."],   mono: "No ₹500 logos. No overnight rebrands. There's a 3-week starter pack — ask." },
    { line: ["Tension.", "That's the whole point", "."],mono: "The space between the safe option and the brave one — that's where the work lives." },
    { line: ["We give", "big heads", "."],              mono: "Hero headlines that don't whisper. Type as a load-bearing wall." },
    { line: ["We're great with our", "hands", "."],     mono: "We still sketch on paper. Pens. Real ones." },
    { line: ["We're into", "long-form", "."],           mono: "Case studies. Brand books. Manifesto pages. We write before we design." },
    { line: ["We finish", "on brief", "."],             mono: "What we promised, on the date we promised. Boring. We know." },
    { line: ["We listen before we", "whisper", "."],    mono: "Two weeks of questions and audits before a single pixel moves." },
    { line: ["We talk dirty in", "hex", "."],           mono: "#FF3B7F. #E8FF00. #0E0E0C. We are fluent." },
  ];

  // pick alternating layouts and accent colors per line for visual rhythm
  const accents = ["var(--pink)", "var(--ink)", "var(--lava)", "var(--blue)", "var(--pink)", "var(--ink)"];

  return (
    <section className="pillow noise rules" id="pillow">
      <window.Furniture num="04" label="OFF THE RECORD" ghost="pillow talk." position="left" />
      <div className="wrap">
        <div className="pillow__head">
          <div>
            <span className="eyebrow">Off the record · 12 lines</span>
            <h2 className="mega" style={{ marginTop: 16 }}>
              A few things<br />
              we're <span className="t-serif" style={{ color: "var(--pink)" }}>into.</span>
            </h2>
          </div>
          <p>Read it however you want. Then read it again, as a design studio talking about its work. It still holds up. <em className="t-serif">Promise.</em></p>
        </div>

        <ol className="pillow__list">
          {lines.map((l, i) => {
            const align = i % 2 === 0 ? "left" : "right";
            const accent = accents[i % accents.length];
            return (
              <li key={i} className={`pillow__row pillow__row--${align}`} data-cursor="hot" data-label={i % 2 === 0 ? "READ" : "AGAIN"}>
                <span className="pillow__num">{String(i + 1).padStart(2, "0")} /</span>
                <p className="pillow__line">
                  <span>{l.line[0]} </span>
                  <em className="pillow__hot" style={{ color: accent }}>{l.line[1]}</em>
                  <span>{l.line[2]}</span>
                </p>
                <span className="pillow__mono">↳ {l.mono}</span>
              </li>
            );
          })}
        </ol>

        <div className="pillow__foot">
          <span className="t-mono">↳ Yes we said it. No we won't apologise.</span>
          <a href="#contact" className="uline" data-cursor="hot" data-label="GO"><em className="t-serif" style={{ fontSize: 22, color: "var(--pink)" }}>your turn →</em></a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PillowTalk });