/* global React */
function StepPreview({ kind }) {
  if (kind === "prompt") {
    // Prompt input wireframe — chat composer
    return (
      <div className="preview preview-1">
        <div style={{position: "absolute", inset: "14px 14px auto 14px", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
          <div style={{fontFamily: "Geist Mono, monospace", fontSize: 9, color: "var(--ink-4)", letterSpacing: "0.12em", textTransform: "uppercase"}}>dispatch · new project</div>
          <div style={{display: "flex", gap: 4}}>
            <span style={{width: 6, height: 6, background: "#E2E2E6", borderRadius: "50%"}} />
            <span style={{width: 6, height: 6, background: "#E2E2E6", borderRadius: "50%"}} />
            <span style={{width: 6, height: 6, background: "#E2E2E6", borderRadius: "50%"}} />
          </div>
        </div>
        <div style={{position: "absolute", inset: "44px 14px 12px 14px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 10}}>
          <div style={{fontSize: 12, color: "var(--ink-3)", fontWeight: 500}}>What do you want to sell?</div>
          <div style={{background: "rgba(255,255,255,0.95)", border: "1px solid var(--hairline)", borderRadius: 10, padding: "10px 12px", boxShadow: "0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 24px -16px rgba(60,40,140,0.25)", minHeight: 50, display: "flex", flexDirection: "column", justifyContent: "space-between"}}>
            <div style={{fontSize: 11, color: "var(--ink-2)", lineHeight: 1.4}}>
              Ceremonial-grade matcha from Uji.<br/>Subscription, two tiers.<span className="caret" style={{height: 11, width: 5, verticalAlign: "-1px", marginLeft: 1}}/>
            </div>
            <div style={{display: "flex", justifyContent: "flex-end"}}>
              <span style={{width: 18, height: 18, background: "var(--ink)", borderRadius: "50%"}} />
            </div>
          </div>
          <div style={{display: "flex", gap: 4, flexWrap: "wrap"}}>
            <span style={{fontSize: 9, padding: "3px 7px", border: "1px solid var(--hairline)", borderRadius: 99, color: "var(--ink-3)"}}>matcha sub</span>
            <span style={{fontSize: 9, padding: "3px 7px", border: "1px solid var(--hairline)", borderRadius: 99, color: "var(--ink-3)"}}>parfum</span>
            <span style={{fontSize: 9, padding: "3px 7px", border: "1px solid var(--hairline)", borderRadius: 99, color: "var(--ink-3)"}}>ceramics</span>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "storefront") {
    return (
      <div className="preview preview-2">
        <div style={{position: "absolute", inset: 0, padding: 12, display: "flex", flexDirection: "column", gap: 8}}>
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 6, borderBottom: "1px solid var(--hairline)"}}>
            <div style={{fontSize: 10, fontWeight: 500, letterSpacing: "-0.02em"}}>Hoshino Matcha</div>
            <div style={{display: "flex", gap: 6}}>
              <span style={{width: 14, height: 4, background: "#E2E2E6", borderRadius: 2}} />
              <span style={{width: 14, height: 4, background: "#E2E2E6", borderRadius: 2}} />
              <span style={{width: 14, height: 4, background: "#E2E2E6", borderRadius: 2}} />
            </div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, flex: 1}}>
            <div style={{display: "flex", flexDirection: "column", justifyContent: "center", gap: 4}}>
              <div style={{fontSize: 13, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05}}>Ceremonial matcha, monthly.</div>
              <div style={{fontSize: 8.5, color: "var(--ink-3)", lineHeight: 1.4}}>Stone-milled in Uji. Shipped to your door.</div>
              <div style={{marginTop: 4, display: "inline-flex", alignSelf: "flex-start", background: "var(--ink)", color: "#fff", fontSize: 8.5, padding: "4px 8px", borderRadius: 99}}>Subscribe →</div>
            </div>
            <div style={{background: "linear-gradient(135deg, #DDE6FF, #F1E6FF 50%, #FFE6EA)", borderRadius: 6, position: "relative", overflow: "hidden"}}>
              <div style={{position: "absolute", inset: 0, background: "repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.2) 6px 7px)"}} />
            </div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6}}>
            {[["#EFE9FF","#DCE8FF"],["#FFE6EA","#FFD9D2"],["#E8FFEF","#D6F3FF"]].map(([a,b],i) => (
              <div key={i} style={{aspectRatio: "1", background: `linear-gradient(135deg, ${a}, ${b})`, borderRadius: 4, border: "1px solid var(--hairline)"}} />
            ))}
          </div>
        </div>
      </div>
    );
  }
  if (kind === "ops") {
    return (
      <div className="preview preview-3">
        <div style={{position: "absolute", inset: 0, padding: 12, display: "flex", flexDirection: "column", gap: 6}}>
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
            <div style={{fontFamily: "Geist Mono, monospace", fontSize: 9, color: "var(--ink-4)", letterSpacing: "0.12em", textTransform: "uppercase"}}>operator · today</div>
            <div style={{display: "inline-flex", alignItems: "center", gap: 4, fontSize: 9, color: "var(--ink-3)"}}>
              <span style={{width: 5, height: 5, borderRadius: "50%", background: "var(--ember)"}} /> live
            </div>
          </div>
          {[
            ["09:42", "Restocked matcha 30g tin", "draft"],
            ["10:18", "Sent harvest email · 38% open", "done"],
            ["12:30", "Fulfilled 84 orders", "done"],
            ["14:12", "Drafted 12 replies · 1 to you", "review"],
          ].map(([t, msg, s], i) => (
            <div key={i} style={{display: "flex", gap: 8, alignItems: "center", padding: "5px 0", borderBottom: i < 3 ? "1px dashed var(--hairline)" : "none"}}>
              <span style={{fontFamily: "Geist Mono, monospace", fontSize: 8.5, color: "var(--ink-4)", width: 28}}>{t}</span>
              <span style={{fontSize: 9.5, color: "var(--ink-2)", flex: 1, lineHeight: 1.3}}>{msg}</span>
              <span style={{fontFamily: "Geist Mono, monospace", fontSize: 8, padding: "1px 5px", border: "1px solid var(--hairline)", borderRadius: 4, color: s === "done" ? "var(--ink-4)" : "var(--ember)"}}>{s}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  return null;
}

function HowItWorks() {
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="num">04 ——</span> How it works</span>
          <h2>Three steps.<br /><span className="accent">That's the whole setup.</span></h2>
          <p className="lede">Tell Dispatch what you sell. Watch the store appear. Then run it together — your taste, its execution.</p>
        </div>
      </div>
      <div className="how">
        <div className="step">
          <StepPreview kind="prompt" />
          <span className="lbl">Step one · 30 sec</span>
          <h3>Describe what you sell.</h3>
          <p>A sentence. A paragraph. A messy voice memo. Dispatch reasons about category, audience, positioning, and pricing from whatever you can give it.</p>
          <div className="n">i.</div>
        </div>
        <div className="step">
          <StepPreview kind="storefront" />
          <span className="lbl">Step two · 90 sec</span>
          <h3>Watch the store appear.</h3>
          <p>Brand, storefront, catalog, copy, checkout, infrastructure — generated in front of you. Steer it with a prompt, or edit with your hands.</p>
          <div className="n">ii.</div>
        </div>
        <div className="step">
          <StepPreview kind="ops" />
          <span className="lbl">Step three · ongoing</span>
          <h3>Run it together.</h3>
          <p>You set direction in plain English: "launch a holiday drop", "raise prices 8%", "show me what's broken." Dispatch does the work and brings the big calls back to you.</p>
          <div className="n">iii.</div>
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;