// pages.jsx — Home, Services, Pricing, About, Contact

// ── Hero (used on Home) ──────────────────────────────────────────────────
function Hero({ headlineKey, onOpenModal, onBookDemo }) {
  const h = HEADLINES[headlineKey] || HEADLINES.price;
  const bullets = h.bullets || [
  ["Real humans", " — not AI"],
  ["80% cheaper", " than typical agencies"],
  ["No contracts", ", cancel anytime"]];

  const channels = [
  { name: "Facebook", icon: "facebook", color: "#1877F2" },
  { name: "Instagram", icon: "instagram", color: "#E4405F" },
  { name: "LinkedIn", icon: "linkedin", color: "#0A66C2" },
  { name: "Pinterest", icon: "heart", color: "#E60023" },
  { name: "TikTok", icon: "tiktok", color: "#111827" },
  { name: "YouTube", icon: "video", color: "#FF0000" },
  { name: "Google", icon: "google", color: "#34A853" },
  { name: "X", icon: "twitter", color: "#0F172A" }];

  return (
    <section className="hero">
      <div className="hero-bg" aria-hidden="true">
        <div className="hero-bg-blob hero-bg-blob--a" />
        <div className="hero-bg-blob hero-bg-blob--b" />
        <div className="hero-bg-blob hero-bg-blob--c" />
        <div className="hero-bg-grid" />
      </div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="kicker"><span className="dot" /> {h.eyebrow}</span>
            </div>
            <h1>{renderHeadline(h.h1)}</h1>
            <p className="hero-lede">{h.lede}</p>
            <ul className="hero-bullets">
              {bullets.map((b, i) =>
              <li key={i}>
                  <span className="hero-bullets-check"><Icon name="check" size={12} /></span>
                  <span><strong>{b[0]}</strong>{b[1]}</span>
                </li>
              )}
            </ul>
            <div className="hero-ctas">
              <button className="btn btn--primary btn--lg" onClick={onOpenModal}>
                Get started from $99/mo <Icon name="arrow-right" size={16} />
              </button>
              <button className="btn btn--ghost btn--lg" onClick={onBookDemo}>
                <Icon name="calendar" size={16} /> Book a demo
              </button>
            </div>
            <div className="hero-trust">
              <span><strong>Trusted by 10,000+</strong> small businesses</span>
              <span className="hero-trust-sep" />
              <span>Cancel anytime</span>
            </div>
            <div className="hero-channels">
              <div className="hero-channels-label">Supported social media channels</div>
              <div className="hero-channels-row">
                {channels.map((c) =>
                <span key={c.name} className="hero-channel" title={c.name} style={{ background: c.color }}>
                    <Icon name={c.icon} size={14} color="#fff" />
                  </span>
                )}
              </div>
            </div>
          </div>
          <HeroReel />
        </div>
        <div className="centered-reel"><HeroReel /></div>
      </div>
    </section>);

}

// ── Home page composition ────────────────────────────────────────────────
function HomePage({ headlineKey, onOpenModal, onBookDemo, onNav }) {
  return (
    <div className="page">
      <Hero headlineKey={headlineKey} onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
      <Press />
      <TrustStrip />
      <div id="watch-video"><VideoSection tone="bg-2" /></div>
      <div id="sample">
        <ExamplesGrid embedded={true} tone="bg" />
      </div>
      <VideoExamples tone="bg-2" />
      <ValueProps onNav={onNav} onOpenModal={onOpenModal} tone="bg-3" />
      <HowItWorks tone="bg" />
      <GridGallery onBookDemo={onBookDemo} tone="bg-2" />
      <div id="compare"><Compare onOpenModal={onOpenModal} tone="bg" /></div>
      <Testimonials tone="bg-2" />
      <PricingSection embedded={true} onOpenModal={onOpenModal} tone="bg" />
      <Guarantee tone="bg-2" onOpenModal={onOpenModal} />
      <FAQ tone="bg" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>);

}

// ── Examples page ────────────────────────────────────────────────────────
function ExamplesPage({ onOpenModal, onBookDemo }) {
  return (
    <div className="page">
      <section className="hero centered-hero" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
            <span className="kicker" style={{ marginBottom: 24 }}><span className="dot" /> Our work</span>
            <h1>Real social posts <span className="display-em">we've made.</span></h1>
            <p className="hero-lede" style={{ margin: "20px auto 0" }}>A look at recent work created for real clients across industries. Filter by category to see examples in your niche.</p>
          </div>
        </div>
      </section>
      <ExamplesGrid embedded={false} tone="bg-2" />
      <VideoExamples tone="bg" />
      <Testimonials short={true} tone="bg-2" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>);

}

// ── Services page ────────────────────────────────────────────────────────
function ServicePage({ onOpenModal, onBookDemo }) {
  return (
    <div className="page">
      <section className="hero centered-hero" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
            <span className="kicker" style={{ marginBottom: 24 }}><span className="dot" /> Services</span>
            <h1>The whole <span className="display-em">social-media stack,</span> handled.</h1>
            <p className="hero-lede" style={{ margin: "20px auto 0" }}>Writing, design, scheduling, strategy — each handled by a specialist on our team, coordinated by your account manager. One team, one inbox, plans from $99/mo.</p>
          </div>
        </div>
      </section>

      <section className="section section--tight section--bg2">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--gap)", marginTop: 56 }}
          className="svc-tabs-wrap">
            {SERVICES.map((s, i) =>
            <a key={i} href={"#svc-" + i} onClick={(e) => {e.preventDefault();document.getElementById("svc-" + i)?.scrollIntoView({ behavior: "smooth", block: "start" });}}
            className="card" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 8, textDecoration: "none" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.06em", color: "var(--ink-3)" }}>{String(i + 1).padStart(2, "0")}</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.015em" }}>{s.label}</div>
                <div style={{ fontSize: 13.5, color: "var(--ink-2)", marginTop: 4 }}>{s.title}</div>
              </a>
            )}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          {SERVICES.map((s, i) =>
          <div key={i} className="svc-block" id={"svc-" + i}>
              <div>
                <div className="kicker" style={{ marginBottom: 22 }}><span className="dot" /> {s.label}</div>
                <h2>{s.title}</h2>
                <p>{s.body}</p>
                <ul>
                  {s.bullets.map((b) =>
                <li key={b}><Icon name="check" size={18} /><span>{b}</span></li>
                )}
                </ul>
              </div>
              <div className="svc-vis">
                <ServiceVisual kind={s.vis} idx={i} />
              </div>
            </div>
          )}
        </div>
      </section>

      <Testimonials short={true} />
      <FAQ tone="bg" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>);

}

function ServiceVisual({ kind, idx }) {
  if (kind === "write") {
    return (
      <div style={{ width: "100%", maxWidth: 360 }}>
        <div className="card" style={{ padding: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <div style={{ width: 28, height: 28, borderRadius: 50, background: "linear-gradient(135deg, var(--primary), var(--accent))", color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 11 }}>AB</div>
            <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>DRAFTING — INSTAGRAM</div>
          </div>
          <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink)" }}>
            <span style={{ background: "color-mix(in oklch, var(--primary) 12%, transparent)" }}>Bright, floral,</span> kissed by sunshine
            — our newest single-origin from the Yirgacheffe region.
            Pop in this weekend.<br /><br />
            <span style={{ color: "var(--primary)" }}>#smallbatch #yirgacheffe #thirdwave</span>
          </div>
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)", display: "flex", gap: 10, justifyContent: "space-between", fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>
            <span>146 CHAR</span><span>3 HASHTAGS</span><span>SCHEDULED TUE</span>
          </div>
        </div>
      </div>);

  }
  if (kind === "design") {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, width: "100%" }}>
        {[0, 1, 2, 3].map((i) =>
        <div key={i} style={{
          aspectRatio: 1,
          borderRadius: 16,
          background: i === 0 ? "linear-gradient(135deg, var(--primary), var(--accent))" :
          i === 1 ? "var(--ink)" :
          i === 2 ? "var(--bg-3)" :
          "linear-gradient(135deg, var(--accent), var(--primary))",
          display: "flex", alignItems: "flex-end", padding: 12,
          color: i === 2 ? "var(--ink)" : "#fff",
          fontFamily: "var(--font-display)",
          fontWeight: 600,
          fontSize: 16,
          lineHeight: 1.1,
          letterSpacing: "-0.02em",
          position: "relative",
          overflow: "hidden"
        }}>
            {i === 0 && <>Saturday <em style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic" }}>mornings</em></>}
            {i === 1 && <>Now <em style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", color: "var(--primary)" }}>pouring</em></>}
            {i === 2 && <>Meet Mara</>}
            {i === 3 && <>5 ways<br />to taste</>}
          </div>
        )}
      </div>);

  }
  if (kind === "schedule") {
    const slots = [
    { d: "Mon", t: "9:00 AM", p: "Instagram" },
    { d: "Tue", t: "10:30 AM", p: "LinkedIn" },
    { d: "Wed", t: "9:00 AM", p: "Facebook" },
    { d: "Thu", t: "12:00 PM", p: "X" },
    { d: "Fri", t: "9:00 AM", p: "Google" }];

    return (
      <div style={{ width: "100%", maxWidth: 360 }}>
        <div className="card" style={{ padding: 18 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 12 }}>This week — auto-published</div>
          {slots.map((s, i) =>
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderTop: i ? "1px solid var(--line)" : 0, fontSize: 13.5 }}>
              <div style={{ width: 36, fontFamily: "var(--font-mono)", color: "var(--ink-3)", fontSize: 11.5 }}>{s.d}</div>
              <div style={{ flex: 1, fontWeight: 500 }}>{s.t}</div>
              <div style={{ color: "var(--ink-2)" }}>{s.p}</div>
              <Icon name="check" size={14} color="var(--primary)" />
            </div>
          )}
        </div>
      </div>);

  }
  if (kind === "strategy") {
    return (
      <div style={{ width: "100%", maxWidth: 360, display: "flex", flexDirection: "column", gap: 10 }}>
        <div className="card" style={{ padding: 16 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase" }}>April theme</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, marginTop: 4, letterSpacing: "-0.02em" }}>Spring <em style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", color: "var(--primary)" }}>menu launch</em></div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {[
          ["Education", "8 posts"],
          ["Behind scenes", "4 posts"],
          ["Social proof", "3 posts"],
          ["Offer", "1 post"]].
          map(([k, v], i) =>
          <div key={i} className="card" style={{ padding: 14 }}>
              <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, marginTop: 4 }}>{v}</div>
            </div>
          )}
        </div>
      </div>);

  }
  return null;
}

// ── Pricing page ────────────────────────────────────────────────────────
function PricingPage({ onOpenModal, onBookDemo }) {
  return (
    <div className="page">
      <section className="hero pricing-hero" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
            <span className="kicker" style={{ marginBottom: 24 }}><span className="dot" /> Pricing</span>
            <h1>From <span className="display-em">$99</span> a month. Nothing hidden.</h1>
            <p className="hero-lede" style={{ margin: "20px auto 0" }}>The same starting price we launched with in 2012. Plans scale with how many posts you need; channels add $10/mo. Cancel anytime, no contract, no setup fee.</p>
          </div>
        </div>
      </section>

      <PricingSection onOpenModal={onOpenModal} />
      <AddOnsSection onOpenModal={onOpenModal} />
      <ChannelsSection />
      <Compare tone="bg-2" />

      <Guarantee tone="bg" onOpenModal={onOpenModal} />

      <FAQ tone="bg-2" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>);

}

// ── About page ──────────────────────────────────────────────────────────
function AboutPage({ onOpenModal, onBookDemo }) {
  return (
    <div className="page">
      <section className="about-hero">
        <div className="container">
          <span className="kicker" style={{ marginBottom: 24 }}><span className="dot" /> About us</span>
          <h1>The leading social-media management agency <span className="display-em">since 2012.</span></h1>
          <p style={{ marginTop: 24 }}>Join us in our mission to empower small businesses around the world. We're using technology to give business owners more time to focus on what they do best — serving their customers and building stronger businesses.</p>
          <p style={{ marginTop: 20, color: "var(--ink-3)" }}>It's a story we hear every week. A florist in Tulsa called us last spring: "I've been quoted $2,400 a month by three different agencies. I make wedding bouquets. I don't have $2,400 a month." Two weeks later she was posting four times a week, written by a real human on our team. That's why we exist — and why we've stayed at it for fourteen years and 10,000+ small businesses.</p>
        </div>
      </section>

      <section className="section section--tight section--bg2">
        <div className="container">
          <div className="stat-grid">
            {STATS.map((s) =>
            <div key={s.label} className="stat-card">
                <div className="stat-num">{s.num}</div>
                <div className="stat-label">{s.label}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="svc-block">
            <div>
              <div className="kicker" style={{ marginBottom: 22 }}><span className="dot" /> Our promise</div>
              <h2>Real humans, not AI. <span className="display-em">No content mills.</span> No bait pricing.</h2>
              <p>Every post we publish is written and designed by a human on our payroll, working from your brand-voice document. AI helps us internally with research, brainstorming, and hashtag testing — but the writing, the design, and the strategy are done by people, every time.</p>
              <p style={{ marginTop: 16 }}>The trade-off: you can probably find cheaper. You will not find better starting at $99.</p>
            </div>
            <div className="svc-vis">
              <div style={{ display: "flex", flexDirection: "column", gap: 10, width: "100%", maxWidth: 320 }}>
                <div className="card" style={{ display: "flex", gap: 14, padding: 16, alignItems: "center" }}>
                  <div className="testi-avatar" style={{ background: "oklch(0.7 0.17 30)" }}>AB</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>Aisha B.</div>
                    <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Writer · 4 yrs · Top 1% talent</div>
                  </div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, padding: "3px 6px", background: "color-mix(in oklch, var(--primary) 15%, transparent)", color: "var(--primary)", borderRadius: 4, letterSpacing: "0.04em" }}>FULL-TIME</div>
                </div>
                <div className="card" style={{ display: "flex", gap: 14, padding: 16, alignItems: "center" }}>
                  <div className="testi-avatar" style={{ background: "oklch(0.65 0.16 250)" }}>DM</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>Diego M.</div>
                    <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Designer · 6 yrs · Top 1% talent</div>
                  </div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, padding: "3px 6px", background: "color-mix(in oklch, var(--primary) 15%, transparent)", color: "var(--primary)", borderRadius: 4, letterSpacing: "0.04em" }}>FULL-TIME</div>
                </div>
                <div className="card" style={{ display: "flex", gap: 14, padding: 16, alignItems: "center" }}>
                  <div className="testi-avatar" style={{ background: "oklch(0.7 0.16 130)" }}>BN</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>Becca N.</div>
                    <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Success · 3 yrs · Top 1% talent</div>
                  </div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, padding: "3px 6px", background: "color-mix(in oklch, var(--primary) 15%, transparent)", color: "var(--primary)", borderRadius: 4, letterSpacing: "0.04em" }}>FULL-TIME</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Testimonials short={true} />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>);

}

// ── Contact page ────────────────────────────────────────────────────────
function ContactPage({ onOpenModal, onBookDemo }) {
  const [sent, setSent] = React.useState(false);
  return (
    <div className="page">
      <section className="hero centered-hero" style={{ paddingBottom: 56 }}>
        <div className="container">
          <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
            <span className="kicker" style={{ marginBottom: 24 }}><span className="dot" /> Contact</span>
            <h1>Talk to a <span className="display-em">real human.</span></h1>
            <p className="hero-lede" style={{ margin: "20px auto 0" }}>Reach your account manager by email or in the dashboard chat. Fast response times — same day, every day.</p>
          </div>
        </div>
      </section>

      <section className="section section--tight section--bg2">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="contact-info-card">
                <Icon name="comment" size={22} />
                <div>
                  <h4>In-app chat</h4>
                  <p>Chat directly with your account manager from your client dashboard, by name.</p>
                </div>
              </div>
              <div className="contact-info-card">
                <Icon name="mail" size={22} />
                <div>
                  <h4>Email</h4>
                  <p>hello@99social.com — we answer every email, often inside the hour.</p>
                </div>
              </div>
              <div className="contact-info-card">
                <Icon name="map" size={22} />
                <div>
                  <h4>HQ</h4>
                  <p>1308 E Cesar Chavez St, Austin, TX 78702</p>
                </div>
              </div>
              <div className="contact-info-card">
                <Icon name="calendar" size={22} />
                <div>
                  <h4>Book a call</h4>
                  <p>20-minute intro chats with no pressure pitch. Pick a slot in our calendar.</p>
                </div>
              </div>
            </div>

            <form className="contact-form" onSubmit={(e) => {e.preventDefault();setSent(true);}}>
              {!sent ?
              <>
                  <div>
                    <label>Your name</label>
                    <input className="modal-input" placeholder="Maya Vance" required />
                  </div>
                  <div>
                    <label>Email</label>
                    <input type="email" className="modal-input" placeholder="you@business.com" required />
                  </div>
                  <div>
                    <label>What can we help with?</label>
                    <textarea placeholder="Tell us a bit about your business and what you'd like help with." required></textarea>
                  </div>
                  <button className="btn btn--primary btn--lg" type="submit" style={{ justifyContent: "center" }}>
                    Send message <Icon name="arrow-right" size={14} />
                  </button>
                </> :

              <div style={{ textAlign: "center", padding: "32px 0" }}>
                  <div className="modal-success-icon" style={{ background: "var(--primary)", margin: "0 auto 16px" }}><Icon name="check" size={32} /></div>
                  <h2 style={{ fontSize: 28 }}>Got it.</h2>
                  <p className="muted" style={{ marginTop: 8 }}>We'll be in touch within a few hours.</p>
                </div>
              }
            </form>
          </div>
        </div>
      </section>

      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>);

}

Object.assign(window, {
  Hero, HomePage, ServicePage, ServiceVisual, PricingPage, AboutPage, ContactPage, ExamplesPage
});