/* global React */
const { useState: useHState, useEffect: useHEffect, useRef: useHRef } = React;

const HERO_EXAMPLES = [
"A subscription for single-origin matcha from Uji.",
"A modern refill bar for parfum, shipped from Brooklyn.",
"Handmade ceramic tableware, made-to-order in Lisbon.",
"Vintage Japanese denim — one drop every Friday.",
"A snack brand for endurance cyclists, sold in 6-packs."];


function GhostTyper({ value, setValue, focused }) {
  const [idx, setIdx] = useHState(0);
  const [shown, setShown] = useHState("");
  const [phase, setPhase] = useHState("typing");
  useHEffect(() => {
    if (value.length > 0 || focused) return;
    const target = HERO_EXAMPLES[idx];
    let t;
    if (phase === "typing") {
      if (shown.length < target.length) {
        t = setTimeout(() => setShown(target.slice(0, shown.length + 1)), 32 + Math.random() * 28);
      } else {
        t = setTimeout(() => setPhase("hold"), 1600);
      }
    } else if (phase === "hold") {
      t = setTimeout(() => setPhase("erasing"), 600);
    } else if (phase === "erasing") {
      if (shown.length > 0) {
        t = setTimeout(() => setShown(shown.slice(0, -1)), 14);
      } else {
        setIdx((i) => (i + 1) % HERO_EXAMPLES.length);
        setPhase("typing");
      }
    }
    return () => clearTimeout(t);
  }, [shown, phase, idx, value, focused]);

  useHEffect(() => {
    if (value.length > 0 || focused) {
      setShown("");
      setPhase("typing");
    }
  }, [value, focused]);

  if (value.length > 0 || focused) return null;
  return (
    <div style={{ position: "absolute", top: 4, left: 4, right: 60, pointerEvents: "none", color: "var(--ink-4)", fontSize: 16, lineHeight: 1.5, letterSpacing: "-0.005em" }}>
      <span style={{ color: "var(--ink-3)" }}>I want to sell </span>
      <span>{shown}<span className="caret" style={{ height: 16, width: 6, background: "var(--ink-3)", verticalAlign: "-2px" }} /></span>
    </div>);

}

function HeroChatBar() {
  const [value, setValue] = useHState("");
  const [focused, setFocused] = useHState(false);
  const ref = useHRef(null);
  const submit = () => {
    if (!value.trim()) {
      window.location.href = "product.html";
      return;
    }
    // Hand off to the product app with the prompt prefilled.
    try { sessionStorage.setItem("dispatch:initial-prompt", value); } catch (e) {}
    window.location.href = "product.html";
  };
  const onKey = (e) => {
    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); }
  };
  return (
    <div className="chatbar-wrap">
      <div className="chatbar">
        <div style={{ position: "relative" }}>
          <textarea
            ref={ref}
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            onKeyDown={onKey}
            rows={2}
            spellCheck={false}
            aria-label="Describe what you want to sell" />

          <GhostTyper value={value} setValue={setValue} focused={focused} />
        </div>
        <div className="row">
          <div className="chip-row">
            <button className="chip" onClick={() => setValue("Specialty matcha subscription from Uji, Japan")}>Matcha subscription</button>
            <button className="chip" onClick={() => setValue("Refillable parfum studio in Brooklyn")}>Parfum refill bar</button>
            <button className="chip" onClick={() => setValue("Handmade ceramic tableware made-to-order")}>Ceramics studio</button>
            <button className="chip" onClick={() => setValue("Weekly drops of vintage Japanese denim")}>Vintage denim</button>
          </div>
          <button className={"send" + (value.trim().length === 0 ? " disabled" : "")} onClick={submit} aria-label="Build store">
            <SendIcon />
          </button>
        </div>
      </div>
    </div>);

}

function Hero() {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 28 }}>
          <span className="dot" />
          <span>DISPATCH / FALL 2026 RELEASE</span>
          <span style={{ color: "var(--ink-4)" }}>— Now in private beta</span>
        </div>

        <h1>
          <span className="lead">AI-native store</span>
          Describe a business.<br />
          <span className="accent">Dispatch builds, launches and operates it for you.</span>
        </h1>

        <p className="hero-sub">
          From a single sentence, Dispatch creates your storefront, products, brand,
          and checkout. After launch, it keeps the store running. You stay in charge.
        </p>

        <div className="hero-cta">
          <HeroChatBar />
          <div className="hero-foot">
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ember)" }} />
              Live store generated in ~90 seconds
            </span>
            <span style={{ color: "var(--ink-4)" }}>·</span>
            <span>No credit card required</span>
            <span style={{ color: "var(--ink-4)" }}>·</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              Press <span className="kbd">⌘</span> <span className="kbd">K</span> to open
            </span>
          </div>
        </div>

        <div className="logos">
          <span className="logo-label">In production for</span>
          <span className="logo-pill" style={{ fontWeight: 500, letterSpacing: "-0.02em" }}>Hoshino &amp; Co.</span>
          <span className="logo-pill" style={{ fontWeight: 600, letterSpacing: "-0.04em" }}>NORTH/LINE</span>
          <span className="logo-pill" style={{ fontFamily: "Geist Mono", fontSize: 13, letterSpacing: "0.04em" }}>SUNDRY.OPS</span>
          <span className="logo-pill" style={{ fontWeight: 500, letterSpacing: "-0.02em" }}>Maison Albe</span>
          <span className="logo-pill" style={{ fontWeight: 500, letterSpacing: "-0.02em" }}>Crescent Goods</span>
          <span className="logo-pill" style={{ fontFamily: "Geist Mono", fontSize: 13 }}>parallel.studio</span>
        </div>
      </div>
    </section>);

}

window.Hero = Hero;
window.HeroChatBar = HeroChatBar;