// components.jsx — Dialed In AI v2

const { useState, useEffect, useRef } = React;

const CAL_URL = "https://cal.com/dialedinai/discovery-call";
const PLAYBOOK_URL = "https://chill-relative-dd1.notion.site/GTM-Workflows-Menu-2e8c802285178009a927dd3fc1fb0337";
const SUBSTACK_URL = "https://thedialedin.substack.com/";
const INSTAGRAM_URL = "https://www.instagram.com/kyumaars/";
const LINKEDIN_URL = "https://www.linkedin.com/in/kumaresh-natarajan/";
const EMAIL_URL = "mailto:kumaresh@dialinai.com";
const WHATSAPP_URL = "https://wa.me/917358267748";

const DialMark = ({ size = 28 }) =>
<img src="assets/logo-transparent.png" alt="" className="nav-logo"
style={{ width: size, height: size }} aria-hidden="true" />;


/* ─────────────────────────────  NAV  ───────────────────────────── */
function Nav() {
  return (
    <nav className="nav" data-screen-label="01 Nav">
      <a href="#top" className="nav-brand">
        <DialMark />
        <span className="nav-wordmark-sig">dialed in.</span>
      </a>
      <div className="nav-links">
        <a href="#cases">work</a>
        <a href={SUBSTACK_URL} target="_blank" rel="noreferrer">writing</a>
        <a href="#contact">contact</a>
        <a href={CAL_URL} target="_blank" rel="noreferrer" className="nav-cta" style={{ color: "rgb(0, 0, 0)", fontFamily: "\"DialedIn Handwriting\"" }}>Book a Call</a>
      </div>
    </nav>);

}

/* ─────────────────────────────  HERO  ───────────────────────────── */
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="02 Hero">
      <div className="hero-glow" />
      <div className="hero-dotgrid" />
      <div className="hero-grain" aria-hidden="true" />
      <div className="hero-doodles" aria-hidden="true">
        {/* curved arrow pointing down-right toward "actually" */}
        <svg className="doodle doodle-arrow-1" viewBox="0 0 120 100" fill="none">
          <path d="M10 15 C 40 20, 70 35, 95 75" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none" />
          <path d="M85 60 L 95 78 L 78 80" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
        <span className="doodle doodle-text doodle-text-1">ship it →</span>

        {/* sparkle cluster */}
        <svg className="doodle doodle-sparkle doodle-sparkle-1" viewBox="0 0 40 40" fill="none">
          <path d="M20 4 L22 18 L36 20 L22 22 L20 36 L18 22 L4 20 L18 18 Z" fill="currentColor" />
        </svg>
        <svg className="doodle doodle-sparkle doodle-sparkle-2" viewBox="0 0 40 40" fill="none">
          <path d="M20 4 L22 18 L36 20 L22 22 L20 36 L18 22 L4 20 L18 18 Z" fill="currentColor" />
        </svg>

        {/* "← pipeline" doodle on the left */}
        <span className="doodle doodle-text doodle-text-2">← pipeline</span>

        {/* checkmark */}
        <svg className="doodle doodle-check" viewBox="0 0 60 60" fill="none">
          <circle cx="30" cy="30" r="24" stroke="currentColor" strokeWidth="1.4" fill="none" />
          <path d="M18 30 L 27 39 L 44 21" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>

        {/* small dial/radar */}
        <svg className="doodle doodle-dial" viewBox="0 0 80 80" fill="none">
          <circle cx="40" cy="40" r="30" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
          <circle cx="40" cy="40" r="20" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
          <circle cx="40" cy="40" r="10" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
          <line x1="40" y1="40" x2="62" y2="22" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
          <circle cx="62" cy="22" r="2.4" fill="currentColor" />
        </svg>

        {/* asterisk / star burst */}
        <svg className="doodle doodle-asterisk" viewBox="0 0 40 40" fill="none">
          <line x1="20" y1="6" x2="20" y2="34" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <line x1="6" y1="20" x2="34" y2="20" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <line x1="10" y1="10" x2="30" y2="30" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <line x1="30" y1="10" x2="10" y2="30" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>

        <span className="doodle doodle-text doodle-text-3">dialed.</span>
      </div>

      <div className="hero-inner">
        <a href="https://bitscale.ai" target="_blank" rel="noreferrer" className="hero-badge" aria-label="Bitscale Certified Partner">
          <img src="assets/bitscale-partner-badge.png" alt="Bitscale Certified Partner" />
          <span className="hero-badge-meta">
            <span className="hero-badge-tag" style={{ textAlign: "center" }}>// certified</span>
            <span className="hero-badge-name" style={{ textAlign: "center" }}>Bitscale Partner</span>
          </span>
        </a>
        <h1 className="hero-display">
          GTM systems that <em style={{ color: 'var(--lilac)' }}>actually</em><br />ship pipeline.
        </h1>
        <p className="hero-lede">we design, build, and run the systems that source your outbound and qualify your inbound. 


        </p>
        <div className="hero-cta-row">
          <a href={CAL_URL} target="_blank" rel="noreferrer" className="btn btn-primary">book a call →</a>
          <a href="#playbook" className="btn btn-ghost">get the playbook</a>
        </div>
      </div>
    </section>);

}

/* ─────────────────────────────  LOGOS MARQUEE  ───────────────────────────── */
function Logos({ speed = 18, direction = 'left', paused = false }) {
  // Sync --logos-duration on :root so tools marquee shares the same speed
  React.useEffect(() => {
    document.documentElement.style.setProperty('--logos-duration', `${speed}s`);
  }, [speed]);

  // Real client logos — uniform height, grayscale on cream background.
  const logos = [
  { name: 'Everstage', file: 'everstage.png' },
  { name: 'ScaleStation', file: 'scalestation.png' },
  { name: 'Copyright Check AI', file: 'copyrightcheck.png' },
  { name: 'Wilco Source', file: 'wilcosource.png' },
  { name: 'Lirik', file: 'lirik.png' },
  { name: 'Keygraph', file: 'keygraph.png' }];

  const track = [...logos, ...logos, ...logos];
  return (
    <section className="logos" data-screen-label="03 Logos">
      <div className="logos-head">
        <span className="logos-label">// trusted to ship</span>
      </div>
      <div className="logos-marquee" data-direction={direction} data-paused={paused ? 'true' : 'false'}>
        <div className="logos-track">
          {track.map((l, i) =>
          <React.Fragment key={i}>
              <span className="logo-item" title={l.name}>
                <img className="logo-img" src={`assets/logos/${l.file}`} alt={l.name} />
              </span>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────────────────────────  METRICS  ───────────────────────────── */
function Metrics() {
  const ms = [
  { k: '// reply rate', v: '10%', s: 'vs 3–5% B2B SaaS benchmark' },
  { k: '// best variant', v: '2.73%', s: 'single-email reply rate' },
  { k: '// partnership', v: 'Bitscale', s: 'partner — operator-tier access' }];

  return (
    <section className="metrics" data-screen-label="03b Metrics">
      <div className="metrics-inner">
        {ms.map((m, i) =>
        <div className="metric-cell" key={i}>
            <div className="metric-k">{m.k}</div>
            <div className="metric-v">{m.v}</div>
            <div className="metric-s">{m.s}</div>
          </div>
        )}
      </div>
    </section>);

}

/* ─────────────────────────────  PROBLEM 8  ───────────────────────────── */
function Problem8() {
  const items = [
  { p: "Hiring a GTM Engineer", c: "$100–150K/yr + 6–9mo ramp" },
  { p: "15+ SaaS tools", c: "$1.5–3K/mo, no one owns it" },
  { p: "Cold email infra held by duct tape", c: "deliverability & domain rep. tanks" },
  { p: "Lead lists are noisy", c: "20%+ bounce-rates..." },
  { p: "\u201CAI personalization\u201D is fake", c: "generic templates → 0.5% reply rates → wasted month" },
  { p: "Founders doing it themselves at midnight", c: "burnout, slow shipping, opportunity cost" },
  { p: "Agencies charge $5–10K/mo that don't ship", c: "bad memory of past agency experience" },
  { p: "Tech stack doesn't talk to each other", c: "manual stitching, no source of truth" }];

  return (
    <>
      <hr className="gradient-strip" />
      <section className="problem8" id="problem" data-screen-label="04 Problem">
        <div className="section-head">
          <p className="section-kicker">// the problem</p>
          <h2 className="section-h2">the 8 things draining your pipeline.</h2>
          <p className="section-lede">every B2B SaaS founder we talk to is bleeding from at least 3 of these costs.

          </p>
        </div>
        <div className="problem-grid">
          {items.map((it, i) =>
          <div className="problem-card" key={i}>
              <div className="problem-num">{String(i + 1).padStart(2, '0')}.</div>
              <p className="problem-statement">{it.p}</p>
              <div className="problem-cost">
                <span className="problem-cost-label">// hidden cost</span>
                {it.c}
              </div>
            </div>
          )}
        </div>
      </section>
    </>);

}

/* ─────────────────────────────  CASE STUDIES  ───────────────────────────── */
function CaseStudies() {
  const cases = [
  {
    logo: "Everstage",
    tag: "// series b · sales compensation saas",
    problem: "5-figure SQLs leaking through their HubSpot chatbot.",
    built: <>AI chatbot. auto-enriches. AI-scores. routes to the rep with <em>Slack</em> alerts.</>,
    results: [
    <>3–5 SQLs/mo <em>recovered</em> that would've been previously missed</>,
    <><em>&lt;5 min</em> routing (vs ~48hr industry avg)</>,
    <>post-launch and <em>still billing</em></>]

  },
  {
    logo: "ScaleStation",
    tag: "// saas revops agency",
    problem: "Manual multi-threading and TAM expansion eating team bandwidth.",
    built: <>Decision-Maker Auto-Mapping + TAM Expansion (lookalikes from <em>closed-won</em>).</>,
    results: [
    <><em>~10 hrs/wk</em> saved across the team</>,
    <><em>~30</em> net-new ICP accounts/month from TAM expansion</>,
    <>6-week <em>build</em></>]

  },
  {
    logo: "Copyright Check AI",
    tag: "// legaltech ai saas",
    problem: "Inbound leads landing but not responded to fast enough.",
    built: <>Speed-to-lead automation. Typeform → CRM → AI scoring → <em>instant</em> email reply.</>,
    results: [
    <>Next-day → <em>&lt;5 min</em> auto-response</>,
    <><em>21×</em> more qualified (5-min response window)</>,
    <>Inbound conversion <em>tripled</em></>]

  }];

  return (
    <>
      <hr className="gradient-strip" />
      <section className="section" id="cases" data-screen-label="05 Case studies">
        <div className="section-head">
          <p className="section-kicker">// case studies</p>
          <h2 className="section-h2">what we've actually shipped.</h2>
          <p className="section-lede">
            three live engagements. real outcomes. no vanity metrics.
          </p>
        </div>
        <div className="cases-grid">
          {cases.map((c, i) =>
          <div className="case-card" key={i}>
              <div className="case-logo">{c.logo}</div>
              <div className="case-tag">{c.tag}</div>
              <p className="case-section-label">// the problem</p>
              <p className="case-problem">{c.problem}</p>
              <p className="case-section-label">// what we built</p>
              <p className="case-built">{c.built}</p>
              <div className="case-results">
                {c.results.map((r, j) =>
              <div className="case-result" key={j}>
                    <span className="case-result-pip">→</span>
                    <span>{r}</span>
                  </div>
              )}
              </div>
            </div>
          )}
        </div>
      </section>
    </>);

}

/* ─────────────────────────────  TIMELINE 30/60/90  ───────────────────────────── */
function Timeline() {
  const stages = [
  {
    day: "// day 0–30 · foundations + launch",
    num: "01",
    title: "ICP, infra, and first emails out the door.",
    body: <>
        <strong>Week 1:</strong> ICP architecture, campaign strategy, lead sourcing, qualification.<br /><br />
        <strong>Week 2–3:</strong> first email sequence live, infra spun up (12 mailboxes / 3 domains warmed), LinkedIn DMs going out.<br /><br />
        By <strong>Day 30</strong>, the system is sending.
      </> },
  {
    day: "// day 31–60 · signal + scale",
    num: "02",
    title: "Real data starts flowing in.",
    body: <>
        First positive replies. We identify the top variants and <strong>kill the losers</strong>.<br /><br />
        <span style={{ color: 'rgb(255, 255, 255)' }}>CRM enrichment automations</span> turn on. Inbound triage automated.<br /><br />
        <span style={{ color: 'rgb(255, 255, 255)' }}>LinkedIn DMs</span> hitting inboxes. connection accepts compounding.<br /><br />
        Slack alerts pinging the second a positive reply lands.
      </>
  },
  {
    day: "// day 61–90 · steady state + decision",
    num: "03",
    title: "Pipeline visible. You decide what's next.",
    body: <>
        Source → score → send → report at full cadence. Pipeline visible in your CRM.<br /><br />
        Second campaign launching with revised data + off the same infra.<br /><br />
        <b style={{ color: 'rgb(255, 255, 255)' }}>Day 90: full system review</b> - continue the retainer or take the playbook and run it yourself. you own the system either way.
      </>
  }];


  const sectionRef = useRef(null);
  const [progress, setProgress] = useState(0); // 0 → 1
  const [activeIdx, setActiveIdx] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = sectionRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = rect.height - vh;
      const scrolled = Math.min(Math.max(-rect.top, 0), total);
      const p = total > 0 ? scrolled / total : 0;
      setProgress(p);
      if (p < 0.34) setActiveIdx(0);else
      if (p < 0.67) setActiveIdx(1);else
      setActiveIdx(2);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const fillPct = `${Math.round(progress * 100)}%`;
  const knobPos = `calc(24px + (100% - 48px) * ${progress})`;

  return (
    <>
      <hr className="gradient-strip" />
      <section className="timeline-section" id="how" ref={sectionRef} data-screen-label="06 Timeline" style={{ minHeight: '220vh' }}>
        <div className="section-head">
          <p className="section-kicker">// how it works</p>
          <h2 className="section-h2">what happens after you sign.</h2>
          <p className="section-lede">
            three stages. <em style={{ fontStyle: 'italic', color: 'var(--cream)' }}>45 days</em> to your first booked meeting · <em style={{ fontStyle: 'italic', color: 'var(--cream)' }}>90 days</em> for the whole system to be set up and running.
          </p>
        </div>
        <div className="timeline-track-row">
          <div className="timeline-track">
            <div className="timeline-rail" />
            <div className="timeline-fill" style={{ width: fillPct }} />
            {[0, 0.5, 1].map((p, i) =>
            <React.Fragment key={i}>
                <div
                className={`timeline-marker ${i <= activeIdx ? 'active' : ''}`}
                style={{ left: `calc(24px + (100% - 48px) * ${p})` }} />
              
                <span
                className="timeline-marker-label"
                style={{ left: `calc(24px + (100% - 48px) * ${p})`, color: i <= activeIdx ? 'var(--lilac)' : undefined }}>
                
                  day {[0, 30, 90][i] === 0 ? '00' : [0, 30, 90][i]}
                </span>
              </React.Fragment>
            )}
            <div className="timeline-knob" style={{ left: knobPos }} />
          </div>
        </div>
        <div className="timeline-stages">
          {stages.map((s, i) =>
          <div className="timeline-stage" data-active={i === activeIdx} key={i}>
              <div>
                <p className="timeline-day">{s.day}</p>
                <div className="timeline-stage-num">{s.num}</div>
                <h3 className="timeline-stage-title">{s.title}</h3>
              </div>
              <p className="timeline-stage-body" style={{ textAlign: "left" }}>{s.body}</p>
            </div>
          )}
        </div>
      </section>
    </>);

}

/* ─────────────────────────────  OFFER  ───────────────────────────── */
function Offer() {
  const components = [
  { name: "ICP Architecture", price: "$1,500" },
  { name: "Campaign Strategy (15–25 angles)", price: "$1,500" },
  { name: "Lead Sourcing (Bitscale + ZeroBounce)", price: "$2,000/mo" },
  { name: "ICP Qualification (AI-tuned scorer)", price: "$1,000/mo" },
  { name: "Per-Lead Personalization (real research)", price: "$1,000/mo" },
  { name: "Cold Email Infrastructure (12 mailboxes)", price: "$500" },
  { name: "Sequence Build & Launch (4-email, A/B tested)", price: "$1,500" },
  { name: "LinkedIn DM Layer (text-first sequencing)", price: "$750/mo" },
  { name: "Slack Alert Pipeline (real-time replies)", price: "$250" },
  { name: "Weekly Report (Slack-delivered)", price: "$500/mo" },
  { name: "Always-On Optimization", price: "$500/mo" }];

  return (
    <>
      <hr className="gradient-strip" />
      <section className="section" id="offer" data-screen-label="07 Offer">
        <div className="section-head center">
          <p className="section-kicker">// the offer</p>
          <h2 className="section-h2">The Allbound OS.</h2>
          <p className="hero-tagline" style={{ justifyContent: 'center' }}>
            <span>your GTM,</span>
            <span className="hero-tagline-sig">augmented.</span>
          </p>
        </div>
        <div className="offer-card">
          <div className="offer-left">
            <div className="offer-left-top">
              <span className="offer-chip">// founding tier · only 3 slots</span>
              <p className="offer-strike">$11,000/mo standalone value</p>
              <div className="offer-price">
                <span className="offer-price-num">$1,500</span>
                <span className="offer-price-unit">/ month</span>
              </div>
              <p className="offer-price-alt">
                or <em>$3,000/quarter</em> - save 33% (equivalent to one month free)
              </p>
              <p className="offer-meta">// audit & setup fee: included
// excludes 3rd-party tool costs.</p>
            </div>
            <a href={CAL_URL} target="_blank" rel="noreferrer" className="btn btn-primary btn-lg">book a call →</a>
          </div>
          <div className="offer-right">
            <p className="offer-list-label">// what's included</p>
            <ul className="offer-list" data-comment-anchor="43084b411d-ul-392-13">
              {components.map((c, i) => <li key={i}>
                  <span>{c.name}</span>
                  <span className="price">{c.price}</span>
                </li>
              )}
            </ul>
            <div className="offer-list-total">
              <span className="label">// total value</span>
              <span className="amount">$11,000/mo</span>
            </div>
          </div>
        </div>

        <div className="guarantee">
          <span className="guarantee-stripe" aria-hidden="true" />
          <div className="guarantee-head">
            <p className="guarantee-kicker">// the guarantee</p>
            <h3 className="guarantee-title">pipeline-or-free <em style={{ fontStyle: 'italic' }}>guarantee.</em></h3>
          </div>
          <div className="guarantee-body-stack">
            <p className="guarantee-body">
              if we don't deliver at least <em>10-20 qualified calls</em> in your first <em>90 days,</em> we work for free until we do{"\n"}
            </p>
            <p className="guarantee-body">
               <em></em>
            </p>
            <p className="guarantee-fineprint"></p>
          </div>
        </div>
      </section>
    </>);

}

/* ─────────────────────────────  LEAD MAGNET  ───────────────────────────── */
function LeadMagnet() {
  return (
    <>
      <hr className="gradient-strip" />
      <section className="lead-section" id="playbook" data-screen-label="08 Lead magnet">
        <div className="section-head">
          <p className="section-kicker">// the playbook</p>
          <h2 className="section-h2">
            not ready to commit?<br />
            here's 12 GTM workflows you can run yourself.
          </h2>
          <p className="section-lede">
            the same playbook we sell to clients. free. steal it. run them yourself, or hand them to your
            current agency. either way, you'll have a sharper system by Friday.
          </p>
        </div>
        <div className="lead-card">
          <div>
            <p className="section-kicker">// 14+ WORKFLOWS</p>
            <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 24, lineHeight: 1.3, color: 'var(--cream)', margin: 0 }}>
              ICP graphs, sequence libraries, deliverability checks, AI scorers. all of it.
            </p>
          </div>
          <iframe
            src="https://tally.so/embed/LZaZ8J?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
            loading="lazy"
            width="100%"
            height="200"
            frameBorder="0"
            marginHeight="0"
            marginWidth="0"
            title="Get the Playbook"
            className="tally-embed"
          />
        </div>
      </section>
    </>);
}

/* ─────────────────────────────  TOOLS strip  ───────────────────────────── */
function Tools() {
  const stack = [
  { name: 'Clay', file: 'clay.svg' },
  { name: 'Bitscale', file: 'bitscale-icon.svg' },
  { name: 'Instantly', file: 'instantly.svg' },
  { name: 'HeyReach', file: 'heyreach.svg' },
  { name: 'SendPilot', file: 'sendpilot.svg' },
  { name: 'Lemlist', file: 'lemlist.svg' },
  { name: 'ZeroBounce', file: 'zerobounce.svg' },
  { name: 'n8n', file: 'n8n.svg' },
  { name: 'Make', file: 'make.svg' },
  { name: 'Relevance AI', file: 'relevance.svg' },
  { name: 'Apify', file: 'apify.svg' },
  { name: 'Trigify', file: 'trigify.svg' },
  { name: 'ScaledMail', file: 'scaledmail.svg' },
  { name: 'OpenAI', file: 'openai.svg' },
  { name: 'Claude', file: 'claude.svg' }];

  const track = [...stack, ...stack];
  return (
    <section className="tools" data-screen-label="09 Tools">
      <div className="tools-head">
        <p className="tools-kicker">// the stack we build on</p>
      </div>
      <div className="tools-marquee">
        <div className="tools-track">
          {track.map((t, i) =>
          <span className="tool-pill" key={i}>
              <img className="tool-pill-img" src={`assets/logos/${t.file}`} alt="" aria-hidden="true" />
              <span>{t.name}</span>
            </span>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────────────────────────  FAQ  ───────────────────────────── */
function FAQ() {
  const qs = [
  {
    q: "How quickly can I see results?",
    a: <>First emails ship by <em>Day 14</em>. First positive replies usually land Week 3. Real signal (what's working, what to scale) by Day 30. Pipeline visible by Day 60.</>
  },
  {
    q: "How does pricing work?",
    a: <><em>$1,500/mo</em> or $3,000/quarter. No setup fee. Quarterly saves you 33% (one month free). 90-day commitment minimum so we have time to find what works. After that, month-to-month, cancel anytime.</>
  },
  {
    q: "What if I already have an SDR or in-house team?",
    a: <>We build the system, your SDR closes. Most of our clients already have SDRs — we hand them <em>sharper leads, better lists, and tested copy</em> than they could source themselves.</>
  },
  {
    q: "What happens if it doesn't work?",
    a: <>At Day 45, if we haven't booked 5 qualified positive replies, we work free until we do. At Day 90, if it's still not landing, <em>full refund</em> of your retainer. You keep the playbook, lists, and infrastructure regardless.</>
  },
  {
    q: "Do you use my email domain?",
    a: <>No. We set up secondary domains that redirect to yours, with your own warmed inboxes (3 inboxes/domain). <em>Your primary domain stays clean.</em></>
  },
  {
    q: "Who owns the systems you build?",
    a: <>You do. Every workflow, every list, every sequence is documented and yours. <em>No vendor lock-in.</em> If you want to leave at Day 90, you walk out with the entire playbook.</>
  }];

  const [open, setOpen] = useState(0);
  return (
    <>
      <hr className="gradient-strip" />
      <section className="section" id="faq" data-screen-label="10 FAQ">
        <div className="section-head center">
          <p className="section-kicker">// faq</p>
          <h2 className="section-h2">the questions everyone asks.</h2>
        </div>
        <div className="faq-list">
          {qs.map((item, i) =>
          <div className="faq-item" data-open={open === i} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="faq-q-icon">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{item.a}</div>
              </div>
            </div>
          )}
        </div>
      </section>
    </>);

}

/* ─────────────────────────────  FINAL CTA  ───────────────────────────── */
function FinalCTA() {
  return (
    <>
      <hr className="gradient-strip" />
      <section className="final" id="contact" data-screen-label="11 Final CTA">
        <div className="final-dotgrid" />
        <div className="final-inner">
          <h2 className="final-headline">let's build your<br />pipeline.</h2>
          <div className="final-cta-row">
            <a href={CAL_URL} target="_blank" rel="noreferrer" className="btn btn-primary btn-lg">book a 20-minute call →</a>
          </div>
          <p className="final-sig">kumaresh, dialed in</p>
        </div>
      </section>
    </>);

}

/* ─────────────────────────────  FOOTER  ───────────────────────────── */
function Footer() {
  return (
    <footer className="footer" data-screen-label="12 Footer">
      <div className="footer-inner">
        <div className="footer-col" data-comment-anchor="a393a941e6-div-627-9">
          <div className="footer-brand">
            <img src="assets/wordmark-handwriting-on-dark.png" alt="dialed in." className="footer-wordmark" />
          </div>
        </div>
        <div className="footer-col">
          <p className="footer-col-label">// links</p>
          <a href={SUBSTACK_URL} target="_blank" rel="noreferrer">Dialed In Newsletter</a>
          <a href={LINKEDIN_URL} target="_blank" rel="noreferrer" data-comment-anchor="dd3e0ce94d-a-637-11">LinkedIn</a>
          <a href={INSTAGRAM_URL} target="_blank" rel="noreferrer" data-comment-anchor="4686d8fa3e-a-638-11">Instagram</a>
        </div>
        <div className="footer-col" data-comment-anchor="5fdf1090b7-div-640-9">
          <p className="footer-col-label">// contact</p>
          <a href={EMAIL_URL}>Email</a>
          <a href={WHATSAPP_URL} target="_blank" rel="noreferrer">WhatsApp</a>
          <a href={CAL_URL} target="_blank" rel="noreferrer">Book a Call</a>
        </div>
      </div>
      <div className="footer-base">
        <span>© 2026 dialed in ai · all rights reserved</span>
      </div>
    </footer>);
}

Object.assign(window, {
  Nav, Hero, Metrics, Logos, Problem8, CaseStudies, Timeline, Offer,
  LeadMagnet, Tools, FAQ, FinalCTA, Footer
});