// HowItWorks — 3-step process + full-width "Coming soon" step 4 card.

window.HowItWorks = function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Train your specialists.",
      kicker: "SETUP · ~10 MIN",
      accent: "coral",
      obj: "assets/objects/audience.png",
      body: "Each specialist arrives pre-loaded with the craft: newsletter cadence, hook theory, carousel pacing, CTA patterns. You just answer a few simple questions about your preferences. Short-form or long? Story-led or framework-led? Curious or confident? That's training.",
      chips: ["Preferences", "Tone", "Format DNA"],
    },
    {
      n: "02",
      title: "Sharpen your team.",
      kicker: "CONTEXT · ONCE",
      accent: "iris",
      obj: "assets/objects/brand-kit.png",
      body: "The context layers do the heavy lifting so you never have to retrain. Your business, your brand, your voice, your audience. Captured and read by every specialist, every draft, forever. No more pasting the same paragraph into ten different chats. Update if and when your business evolves.",
      chips: ["Business", "Brand", "Voice", "Audience"],
    },
    {
      n: "03",
      title: "Create your content.",
      kicker: "SHIP · DAILY",
      accent: "sage",
      obj: "assets/objects/newsletters.png",
      body: "Open The Studio, pick a specialist, describe your idea. Out comes a content draft. Sharp, on-voice, in the right format. Our quality promise:",
      quote: "A solid first draft to sprinkle your human touch on, then it's ready to share.",
      chips: ["All 11 formats", "Your voice", "Edit freely"],
    },
  ];

  return (
    <section className="scs-how-section" style={{
      padding: "120px 32px",
      background: "var(--cream)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse 60% 40% at 50% 100%, hsla(258, 50%, 85%, 0.3), transparent 60%)",
      }} />

      <div style={{ position: "relative", maxWidth: 1200, margin: "0 auto" }}>
        {/* Header */}
        <div style={{ textAlign: "center", maxWidth: 780, margin: "0 auto 72px" }}>
          <window.Eyebrow style={{ marginBottom: 14, color: "var(--orange)" }}>
            How it works
          </window.Eyebrow>
          <h2 style={{
            fontSize: "clamp(40px, 5.2vw, 68px)",
            lineHeight: 1.05, letterSpacing: "-0.025em",
            margin: "0 0 18px",
          }}>
            Three steps to a studio that <em>10x&rsquo;s your content output.</em>
          </h2>
          <p style={{ fontSize: 19, color: "var(--ink-light)", lineHeight: 1.5, margin: 0, maxWidth: 620, marginInline: "auto" }}>
            Set it up once. Create content tailored to you <em>forever.</em>
          </p>
        </div>

        {/* 3-step grid */}
        <div className="scs-how-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 20,
          marginBottom: 20,
        }}>
          {steps.map((s, i) => (
            <div key={s.n} className="scs-how-card scs-reveal" style={{
              background: "var(--white)",
              border: "1px solid var(--border)",
              borderRadius: 20,
              padding: "32px 28px 28px",
              position: "relative",
              display: "flex",
              flexDirection: "column",
              boxShadow: "var(--shadow-sm)",
              overflow: "hidden",
              "--scs-delay": `${i * 90}ms`,
            }}>
              {/* Soft accent blob from the top-right — matches hero mesh-gradient motif */}
              <div aria-hidden="true" style={{
                position: "absolute",
                top: 0, right: 0,
                width: "75%", height: "55%",
                background: `radial-gradient(ellipse 80% 90% at 90% 10%, var(--${s.accent}-3), transparent 70%)`,
                pointerEvents: "none",
              }} />

              {/* Step number */}
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: 56,
                lineHeight: 1,
                letterSpacing: "-0.03em",
                color: `var(--${s.accent}-1)`,
                marginBottom: 16,
              }}>
                {s.n}
              </div>

              {/* Kicker */}
              <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                color: "var(--muted)",
                marginBottom: 10,
              }}>
                {s.kicker}
              </div>

              {/* Title */}
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontSize: 28,
                lineHeight: 1.05,
                letterSpacing: "-0.02em",
                margin: "0 0 14px",
                color: "var(--ink)",
              }}>
                {s.title}
              </h3>

              {/* Body */}
              <p style={{
                fontSize: 15,
                color: "var(--ink-light)",
                lineHeight: 1.55,
                margin: "0 0 16px",
                flex: s.quote ? 0 : 1,
              }}>
                {s.body}
              </p>

              {/* Quote (step 3 only) */}
              {s.quote && (
                <div style={{
                  fontFamily: "var(--font-emphasis)",
                  fontStyle: "italic",
                  fontSize: 20,
                  lineHeight: 1.25,
                  color: "var(--ink)",
                  padding: "14px 16px",
                  borderLeft: `3px solid var(--${s.accent}-2, var(--${s.accent}-1))`,
                  background: `var(--${s.accent}-3)`,
                  borderRadius: "0 10px 10px 0",
                  margin: "0 0 18px",
                  flex: 1,
                }}>
                  &ldquo;{s.quote}&rdquo;
                </div>
              )}

              {/* Chips */}
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: "auto" }}>
                {s.chips.map(c => (
                  <span key={c} style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    letterSpacing: "0.1em",
                    textTransform: "uppercase",
                    padding: "5px 10px",
                    borderRadius: 999,
                    background: `var(--${s.accent}-3)`,
                    color: `var(--${s.accent}-1)`,
                  }}>{c}</span>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Step 4 — "Coming soon" preview strip (intentionally quieter than 1–3) */}
        <div className="scs-how-coming-card scs-reveal" style={{
          background: "var(--white)",
          border: "1px dashed hsl(150, 40%, 65%)",
          borderRadius: 20,
          padding: "28px 32px",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          gap: 32,
          flexWrap: "wrap",
          marginTop: 4,
        }}>
          {/* Left: badge + content */}
          <div style={{ flex: "1 1 520px", position: "relative", zIndex: 1 }}>
            <div style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "5px 11px",
              borderRadius: 999,
              background: "hsla(150, 70%, 45%, 0.1)",
              border: "1px solid hsla(150, 60%, 45%, 0.28)",
              marginBottom: 14,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: "50%",
                background: "hsl(150, 70%, 42%)",
                boxShadow: "0 0 6px hsla(150, 70%, 50%, 0.6)",
              }} />
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.16em",
                textTransform: "uppercase",
                color: "hsl(150, 55%, 30%)",
              }}>Coming soon</span>
            </div>

            <h3 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(24px, 2.4vw, 30px)",
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
              margin: "0 0 10px",
              color: "var(--ink)",
            }}>
              Step 04. <em>Set your schedule. The studio creates automatically.</em>
            </h3>

            <p style={{
              fontSize: 15,
              color: "var(--ink-light)",
              lineHeight: 1.55,
              margin: "0 0 14px",
              maxWidth: 620,
            }}>
              You tell The Studio your rhythm. Newsletter every Tuesday, Reels on Monday and Thursday, LinkedIn twice a week. Your studio fills the queue according to your schedule, so content is waiting in the window when you sit down to share.
            </p>

            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["Recurring cadence", "Per-format schedule", "Always-on queue", "You stay in control"].map(c => (
                <span key={c} style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 10,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  padding: "5px 10px",
                  borderRadius: 999,
                  background: "var(--cream)",
                  color: "var(--ink-light)",
                  border: "1px solid var(--border)",
                }}>{c}</span>
              ))}
            </div>
          </div>

          {/* Right: compact mock calendar */}
          <div className="scs-how-mock" style={{
            flex: "0 1 280px",
            background: "var(--cream)",
            border: "1px solid var(--border)",
            borderRadius: 14,
            padding: "14px 16px",
            position: "relative", zIndex: 1,
          }}>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 10,
              letterSpacing: "0.14em",
              color: "var(--muted)",
              marginBottom: 10,
            }}>WEEKLY CADENCE · PREVIEW</div>

            {[
              { day: "MON", label: "Reel",       c: "hsl(340, 60%, 70%)" },
              { day: "TUE", label: "Newsletter", c: "hsl(12, 70%, 65%)" },
              { day: "WED", label: "LinkedIn",   c: "hsl(210, 60%, 70%)" },
              { day: "THU", label: "Reel",       c: "hsl(340, 60%, 70%)" },
              { day: "FRI", label: "Thread",     c: "hsl(38, 70%, 65%)" },
            ].map(row => (
              <div key={row.day} style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "6px 0",
                borderTop: "1px solid var(--border)",
              }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em",
                  color: "var(--muted)", width: 30,
                }}>{row.day}</span>
                <span style={{
                  width: 8, height: 8, borderRadius: "50%", background: row.c, flexShrink: 0,
                }} />
                <span style={{ fontSize: 12, color: "var(--ink)" }}>{row.label}</span>
                <span style={{
                  marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 9,
                  letterSpacing: "0.1em", color: "hsl(150, 50%, 40%)",
                }}>QUEUED</span>
              </div>
            ))}
          </div>
        </div>

        {/* Step 5 — "Coming soon" Telegram/Messages preview */}
        <div className="scs-how-coming-card scs-reveal" style={{
          background: "var(--white)",
          border: "1px dashed hsl(150, 40%, 65%)",
          borderRadius: 20,
          padding: "28px 32px",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          gap: 32,
          flexWrap: "wrap",
          marginTop: 20,
        }}>
          {/* Left: badge + content */}
          <div style={{ flex: "1 1 520px", position: "relative", zIndex: 1 }}>
            <div style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "5px 11px",
              borderRadius: 999,
              background: "hsla(150, 70%, 45%, 0.1)",
              border: "1px solid hsla(150, 60%, 45%, 0.28)",
              marginBottom: 14,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: "50%",
                background: "hsl(150, 70%, 42%)",
                boxShadow: "0 0 6px hsla(150, 70%, 50%, 0.6)",
              }} />
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.16em",
                textTransform: "uppercase",
                color: "hsl(150, 55%, 30%)",
              }}>Coming soon</span>
            </div>

            <h3 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(24px, 2.4vw, 30px)",
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
              margin: "0 0 10px",
              color: "var(--ink)",
            }}>
              Step 05. <em>Manage your specialists straight from your phone.</em>
            </h3>

            <p style={{
              fontSize: 15,
              color: "var(--ink-light)",
              lineHeight: 1.55,
              margin: "0 0 14px",
              maxWidth: 620,
            }}>
              Idea in the shower? Fire it off to your Social Director from Telegram or Messages. Voice memo on a walk? Send it to your Newsletter Editor. Your specialists spin up drafts wherever you are, so you never lose a thought to a busy day.
            </p>

            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["Telegram", "iMessage", "Voice memos", "Drafts on the go"].map(c => (
                <span key={c} style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 10,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  padding: "5px 10px",
                  borderRadius: 999,
                  background: "var(--cream)",
                  color: "var(--ink-light)",
                  border: "1px solid var(--border)",
                }}>{c}</span>
              ))}
            </div>
          </div>

          {/* Right: compact mock chat thread */}
          <div className="scs-how-mock" style={{
            flex: "0 1 280px",
            background: "var(--cream)",
            border: "1px solid var(--border)",
            borderRadius: 14,
            padding: "14px 16px",
            position: "relative", zIndex: 1,
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 10,
              letterSpacing: "0.14em",
              color: "var(--muted)",
              marginBottom: 4,
            }}>SOCIAL DIRECTOR · TELEGRAM</div>

            {/* User message */}
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <div style={{
                background: "hsl(210, 70%, 55%)",
                color: "var(--white)",
                padding: "8px 12px",
                borderRadius: "14px 14px 4px 14px",
                fontSize: 12, lineHeight: 1.4, maxWidth: "85%",
              }}>
                Reel about time-blocking for solo founders
              </div>
            </div>

            {/* Specialist reply */}
            <div style={{ display: "flex", gap: 6, alignItems: "flex-end" }}>
              <img src="/illustrations-headshots-frameless/parrot_social-director.png" alt=""
                style={{
                  width: 28, height: 28, objectFit: "contain", flexShrink: 0,
                }} />
              <div style={{
                background: "var(--white)",
                border: "1px solid var(--border)",
                color: "var(--ink)",
                padding: "8px 12px",
                borderRadius: "14px 14px 14px 4px",
                fontSize: 12, lineHeight: 1.4, maxWidth: "80%",
              }}>
                On it. Draft in your queue in ~3 min.
              </div>
            </div>

            <div style={{
              marginTop: 4,
              fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.1em",
              color: "hsl(150, 50%, 40%)", textAlign: "right",
            }}>DRAFTED · READY TO REVIEW</div>
          </div>
        </div>
      </div>
    </section>
  );
};