// ============================================================
// Home page — 2 hero variations + landing sections
// ============================================================

// Hero title presets — keep them short, leaned into the postal/moving metaphor
// or productized-services angle. `em` index marks which line takes the italic
// display-sharp accent (the brand's "knife-edge" cut).
const HERO_TITLES = [
  { id: "made-simple",
    lines: ["Migration", "to Shopify.", "made simple"],
    parts: [
      [{ text: "Migration" }],
      [{ text: "to Shopify." }],
      [{ text: "made " }, { text: "simple", italic: true }, { diamond: true }],
    ],
  },
  { id: "move-keep",       lines: ["Move shops.", "Keep",  "everything."],     em: [1] },
  { id: "skip-chaos",      lines: ["Move to",     "Shopify.",  "Skip the chaos."], em: [2] },
  { id: "forwarding",      lines: ["Forwarding",  "address:",   "Shopify."],   em: [2] },
  { id: "new-shop",        lines: ["New shop.",   "Same",  "you."],            em: [1] },
  { id: "off-the-shelf",   lines: ["Migrations.", "Off",   "the shelf."],      em: [1] },
  { id: "no-lost",         lines: ["No lost SEO.", "No",   "lost sleep."],     em: [1] },
  { id: "boring",          lines: ["Boring",      "migrations.", "By design."],em: [2] },
  { id: "pack-ship",       lines: ["Pack it.",    "Ship it.",   "Shopify it."],em: [2] },
];

function HeroTitle({ id }) {
  const preset = HERO_TITLES.find(h => h.id === id) || HERO_TITLES[0];
  if (preset.parts) {
    return (
      <h1 className="hero-v1-title">
        {preset.parts.map((line, i) => (
          <span key={i} className="hero-v1-title-line">
            {line.map((p, j) => {
              if (p.diamond) return <span key={j} className="hero-diamond" aria-hidden="true" />;
              if (p.italic) return <em key={j}>{p.text}</em>;
              return <React.Fragment key={j}>{p.text}</React.Fragment>;
            })}
          </span>
        ))}
      </h1>
    );
  }
  return (
    <h1 className="hero-v1-title">
      {preset.lines.map((line, i) => (
        <span key={i} className="hero-v1-title-line">
          {preset.em.includes(i) ? <em>{line}</em> : line}
        </span>
      ))}
    </h1>
  );
}

// ── Hero v1: "Change of address" postal-forwarding card ─────────────
function HeroV1({ onNav, heroTitleId = "move-keep" }) {
  const [from, setFrom] = React.useState("bigcommerce");
  const fromPlat = PLATFORMS.find(p => p.id === from);

  return (
    <section className="hero-v1 container">
      <div className="hero-v1-grid">
        <div className="stack-md">
          <Reveal>
            <div className="eyebrow">The Shopify migration shop · pick-and-pay · flat rate</div>
          </Reveal>
          <Reveal delay={80}>
            <HeroTitle id={heroTitleId} />
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontSize: "1.25rem", lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 520, margin: 0 }}>
              We move ecommerce stores to Shopify — from any platform — without losing SEO, customers, or sleep. Build your package, get a live estimate, submit for a quote.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div className="row">
              <button className="btn" onClick={() => onNav("build")}>
                Build a migration package <I.ArrowRight size={16} />
              </button>
              </div>
          </Reveal>
          <Reveal delay={320}>
            <div className="row hero-trust-badges" style={{ gap: 24, fontSize: "0.85rem", color: "var(--fg-3)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <I.Shield size={14} style={{ color: "var(--color-success)" }} /> SEO preserved
              </span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <I.Truck size={14} style={{ color: "var(--color-plum-700)" }} /> 6-week launch guarantee
              </span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <I.Sparkles size={14} style={{ color: "var(--color-mustard)" }} /> Fixed price
              </span>
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <div className="fwd-card-wrap" style={{ position: "relative", padding: "16px 32px 32px 16px" }}>
            <div className="fwd-card">
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 11,
                letterSpacing: "0.14em", color: "var(--color-plum-700)",
                textTransform: "uppercase", textAlign: "center",
                borderBottom: "2px solid var(--color-plum-700)",
                paddingBottom: 6, marginBottom: 6,
              }}>
                ✱ Permanent change of address ✱
              </div>
              <div className="fwd-row">
                <div className="fwd-label">From</div>
                <select
                  className="fwd-platform-select"
                  value={from}
                  onChange={(e) => setFrom(e.target.value)}
                  style={{ fontSize: "1.4rem" }}
                >
                  {PLATFORMS.map(p => (
                    <option key={p.id} value={p.id}>{p.name}</option>
                  ))}
                </select>
              </div>
              <div className="fwd-arrow">↓</div>
              <div className="fwd-row">
                <div className="fwd-label">To</div>
                <div className="fwd-value" style={{ color: "var(--color-plum-700)" }}>Shopify</div>
              </div>
              <div className="fwd-row" style={{ gridTemplateColumns: "60px 1fr" }}>
                <div className="fwd-label">Date</div>
                <div className="fwd-value" style={{ fontSize: "1.1rem" }}>{(() => { const d = new Date(); return `${String(d.getMonth()+1).padStart(2,'0')} / ${String(d.getDate()).padStart(2,'0')} / ${d.getFullYear()}`; })()}</div>
              </div>
              <div style={{
                background: "var(--color-blush-200)",
                border: "2px solid var(--color-plum-700)",
                borderRadius: 6,
                padding: "12px 16px",
                marginTop: 8,
                display: "flex", justifyContent: "space-between", alignItems: "center",
              }}>
                <div>
                  <div style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--color-plum-700)", fontWeight: 700, textTransform: "uppercase" }}>Estimated cost</div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "1.6rem", color: "var(--color-plum-900)" }}>$4,900</div>
                </div>
                <button className="btn btn-sm" onClick={() => onNav("build")}>
                  Pick package <I.ArrowRight size={12} />
                </button>
              </div>
              <div style={{
                position: "absolute", bottom: -16, right: -20,
              }}>
                <Postmark label="VOIDS LEGACY · CMS" date="STAMP 2026" rotate={-14} size={120} />
              </div>
            </div>
            {/* Mailing stamps in corner */}
            <div style={{ position: "absolute", top: 4, right: 12, transform: "rotate(8deg)" }}>
              <Stamp color="var(--color-danger)" rotate={4}>Priority</Stamp>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Hero v2: Mega marquee, struck-through legacy platforms ──────────
function HeroV2({ onNav }) {
  const [idx, setIdx] = React.useState(0);
  const opts = ["BigCommerce", "WooCommerce", "Squarespace", "Wix"];
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % opts.length), 1800);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="hero-v2">
      <div className="container">
        <Reveal>
          <div className="eyebrow">Aartisan · Shopify migration specialists</div>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="hero-v2-mega" style={{ marginTop: 16 }}>
            <span className="crossed" style={{ position: "relative", display: "inline-block" }}>
              <span style={{ display: "inline-block", minWidth: "9ch", textAlign: "left" }}>{opts[idx]}</span>
            </span>
            <span style={{ display: "inline-block", margin: "0 0.3em" }}>→</span>
            <span className="replacement">Shopify</span>
          </h1>
        </Reveal>
        <Reveal delay={200}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 64,
            marginTop: 64,
            alignItems: "end",
          }} className="hero-v2-bottom-grid">
            <p style={{
              fontFamily: "var(--font-display-sharp)", fontStyle: "italic",
              fontSize: "clamp(1.5rem, 2.6vw, 2.25rem)",
              lineHeight: 1.25, color: "var(--color-plum-900)", margin: 0, maxWidth: 720,
            }}>
              The team you call when your store needs to move shops — without losing SEO, customers, or its mind.
            </p>
            <div className="row" style={{ justifyContent: "flex-end" }}>
              <button className="btn btn-accent" onClick={() => onNav("build")}>
                Build a migration package <I.ArrowRight size={16} />
              </button>
            </div>
          </div>
        </Reveal>
      </div>
      <div style={{ marginTop: 64 }}>
        <Marquee items={[
          "MOVED FROM BIGCOMMERCE",
          "MOVED FROM WOOCOMMERCE",
          "MOVED FROM SQUARESPACE",
          "MOVED FROM WIX",
          "MOVED FROM OLDER SHOPIFY",
        ]} />
      </div>
    </section>
  );
}

// ── Why-buy-direct (no sales call) — the differentiating section ────
function WhyDirect({ onNav }) {
  const cards = [
    { icon: <I.Box size={28} />, title: "Build your own package", body: "Input your customer, product and order count, and which custom apps you use. Get a quote. Get started!" },
    { icon: <I.Zap size={28} />, title: "No forced discovery call", body: "Configure your package, submit the quote request, and Blake replies within 24 hours with a confirmed quote and a kickoff date." },
    { icon: <I.Shield size={28} />, title: "Money-back if you aren't launched in 6 weeks", body: "If it's not going to work, you'll find out fast. No 8-month long migration horror stories." },
  ];
  return (
    <section className="section container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64 }} className="why-grid">
        <Reveal>
          <div className="stack-md">
            <div className="eyebrow">How we ship</div>
            <h2 className="t-display" style={{ margin: 0, fontSize: "clamp(2.5rem, 5vw, 4.5rem)" }}>
              Build your migration<br/>
              <em style={{ fontFamily: "var(--font-display-sharp)", fontStyle: "italic", fontWeight: 400 }}>like a&nbsp;product.</em>
            </h2>
            <p style={{ fontSize: "1.05rem", lineHeight: 1.6, color: "var(--fg-2)" }}>
              We've done enough of these to know what they cost. So we put the prices up front, on every package — and let you decide.
            </p>
            <div>
              <button className="btn" onClick={() => onNav("build")}>Build a package <I.ArrowRight size={16} /></button>
            </div>
          </div>
        </Reveal>
        <div className="stack-md">
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 24,
                padding: 32,
                background: i === 1 ? "var(--color-mustard)" : "var(--color-cream)",
                border: "2px solid var(--color-plum-700)",
                borderRadius: "var(--radius-lg)",
                boxShadow: "var(--shadow-frame)",
                alignItems: "start",
                transform: i % 2 === 0 ? "rotate(-0.4deg)" : "rotate(0.5deg)",
              }}>
                <div style={{
                  width: 56, height: 56,
                  background: "var(--color-plum-700)",
                  color: "var(--color-cream)",
                  borderRadius: "50%",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>{c.icon}</div>
                <div>
                  <div className="t-h3" style={{ marginBottom: 8 }}>{c.title}</div>
                  <p style={{ margin: 0, color: "var(--fg-2)", lineHeight: 1.55 }}>{c.body}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Process band ────────────────────────────────────────────────────
function ProcessBand() {
  return (
    <section className="section container">
      <Reveal>
        <div className="center stack-md" style={{ marginBottom: 64, alignItems: "center" }}>
          <div className="eyebrow">How a migration goes</div>
          <h2 className="t-display" style={{ margin: 0, fontSize: "clamp(2.25rem, 4.5vw, 4rem)" }}>
            Three steps. <em style={{ fontFamily: "var(--font-display-sharp)", fontStyle: "italic", fontWeight: 400 }}>No</em> mystery.
          </h2>
        </div>
      </Reveal>
      <div className="process-band">
        {PROCESS_STEPS.map((step, i) => (
          <Reveal key={step.num} delay={i * 100}>
            <div className="process-step">
              <div className="process-num">{step.num}</div>
              <h3 style={{
                margin: 0,
                fontFamily: "var(--font-display)",
                fontWeight: 900,
                fontSize: "1.5rem",
                textTransform: "uppercase",
                color: "var(--color-plum-900)",
                letterSpacing: "-0.01em",
              }}>{step.title}</h3>
              <p style={{ color: "var(--fg-2)", lineHeight: 1.55, margin: 0 }}>{step.body}</p>
              <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px dashed var(--color-plum-300)" }}>
                <span className="t-mono">est. {["48 hr", "4 weeks", "1 hour"][i]}</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Founder video — "a word from our founder" ─────────────────────
function FounderVideo() {
  return (
    <section className="section" style={{ background: "var(--color-paper-2)" }}>
      <div className="container">
        <Reveal>
          <div className="founder-grid">
            <div className="stack-md founder-copy">
              <div className="eyebrow">A word from our founder</div>
              <h2 className="t-display founder-title">
                Five minutes<br/>
                <em style={{ fontFamily: "var(--font-display-sharp)", fontStyle: "italic", fontWeight: 400 }}>with Blake.</em>
              </h2>
              <p style={{ fontSize: "1.1rem", lineHeight: 1.6, color: "var(--fg-2)", margin: 0, maxWidth: 480 }}>
                Aartisan founder Blake Boykin on why we built the agency this way —
                flat rates, no forced sales calls, and the pursuit of the boring migration.
              </p>
              <div className="founder-meta">
                <span><I.Clock size={14} /> 5:24 · recorded May 2026</span>
                <span><I.User size={14} /> Blake Boykin, founder</span>
              </div>
            </div>
            <div className="founder-video-col">
              <div className="founder-video-frame">
                <div className="founder-video-wrap">
                  <iframe
                    src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0&modestbranding=1"
                    title="A word from our founder (placeholder)"
                    frameBorder="0"
                    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                </div>
              </div>
              <div className="founder-postmark">
                <Postmark label="Founder · Aartisan" date="VIDEO No.01" size={104} rotate={-9} />
              </div>
              <div className="founder-placeholder-note">Placeholder video — swap embed src in <code>screens-home.jsx</code></div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Platform stamps (from logos rotated like rubber stamps) ────────
function PlatformStamps() {
  return (
    <section className="section-sm container">
      <Reveal>
        <div className="center" style={{ marginBottom: 32 }}>
          <span className="t-mono" style={{ color: "var(--fg-3)" }}>WE'VE MOVED STORES FROM</span>
        </div>
      </Reveal>
      <div style={{
        display: "flex",
        flexWrap: "wrap",
        gap: 16,
        justifyContent: "center",
        alignItems: "center",
      }}>
        {PLATFORMS.filter(p => p.id !== "custom").map((p, i) => (
          <Reveal key={p.id} delay={i * 60}>
            <div style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 12,
              padding: "10px 18px",
              border: "2px solid var(--color-plum-700)",
              borderRadius: "var(--radius-md)",
              background: "var(--color-cream)",
              transform: `rotate(${(i % 2 === 0 ? -1 : 1) * (1 + (i % 3))}deg)`,
              boxShadow: "3px 3px 0 0 var(--color-indigo-ink)",
            }}>
              <PlatformTile p={p} size={28} />
              <span style={{
                fontFamily: "var(--font-display)",
                fontWeight: 700,
                fontSize: "0.95rem",
                color: "var(--color-plum-900)",
                textTransform: "uppercase",
                letterSpacing: "0.04em",
              }}>{p.name}</span>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Testimonial pull-quote ─────────────────────────────────────────
function TestimonialBlock() {
  return (
    <section className="section container">
      <Reveal>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          <div className="quote-card">
            We were terrified of moving 47,000 SKUs and our entire SEO footprint. Aartisan made it look boring.
            <div className="quote-attr">Mara Lin · Head of E-Commerce, Ash &amp; Oak</div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ── Compose the home screen ────────────────────────────────────────
function HomeScreen({ onNav, heroVariant = "v1", heroTitleId = "move-keep" }) {
  return (
    <>
      {heroVariant === "v2" ? <HeroV2 onNav={onNav} /> : <HeroV1 onNav={onNav} heroTitleId={heroTitleId} />}
      {heroVariant !== "v2" && (() => {
        const items = [
          "Shopify Agency Partner",
          "Senior team, no juniors",
          "SEO preserved",
          "No forced sales calls",
          "6-week launch guarantee",
        ];
        const strip = items.flatMap((it, i) => [
          <span key={`t${i}`}>{it}</span>,
          <span key={`d${i}`} className="diamond" style={{ width: 12, height: 12 }} />,
        ]);
        return (
          <div className="marquee" style={{ marginTop: -1 }}>
            <div className="marquee-track">
              <span>{strip}</span>
              <span>{strip}</span>
            </div>
          </div>
        );
      })()}
      <ProcessBand />
      <PlatformStamps />
      <WhyDirect onNav={onNav} />
      <FounderVideo />
      {/* Bottom CTA strip */}
      <section className="section container">
        <Reveal>
          <div className="spotlight-card" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center" }}>
            <div>
              <div className="eyebrow">Last call</div>
              <h2 className="t-display" style={{ fontSize: "clamp(2rem, 4vw, 3.5rem)", margin: "12px 0 16px" }}>
                Ready to move shops?
              </h2>
              <p style={{ fontSize: "1.1rem", color: "var(--fg-2)", margin: "0 0 24px", maxWidth: 520 }}>
                Configure your migration in the builder. Live price, live timeline, no forced sales call.
                Kickoff within 24 hours.
              </p>
              <button className="btn btn-accent" onClick={() => onNav("build")}>
                Build your package <I.ArrowRight size={16} /></button>
            </div>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Postmark label="Aartisan · quote" date="24 HR" size={200} rotate={-6} />
            </div>
          </div>
        </Reveal>
      </section>
    </>
  );
}

Object.assign(window, { HeroV1, HeroV2, HomeScreen, WhyDirect, FounderVideo, ProcessBand, PlatformStamps, HERO_TITLES });