// n-sections.jsx — Nordic-style sections

const GOOGLE_CAL_URL = "https://calendar.app.google/KS4b9peJhiikgHwH9";

// ────────────────────────────────────────────────────────────────────
// Nav
// ────────────────────────────────────────────────────────────────────
function Nav({ onBook }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-logo" aria-label="Cosmos Studio">
          <img src="assets/cosmos-logo.svg" alt="Cosmos Studio" style={{ height: 18, width: 'auto', display: 'block' }} />
        </a>
        <div className="nav-links">
          <a className="nl" href="#problem">Problem</a>
          <a className="nl" href="#how">Retainer</a>
          <a className="nl" href="#pricing">Pricing</a>
          <a className="nl" href="#faq">FAQ</a>
          <button className="btn btn-primary btn-sm" onClick={onBook}>
            Book a call <span className="arr">→</span>
          </button>
        </div>
      </div>
    </nav>);

}

// ────────────────────────────────────────────────────────────────────
// Hero — big wordmark + dark image card with tabs
// ────────────────────────────────────────────────────────────────────
const HERO_TABS = [
{ num: "01", ttl: "Our studio", desc: "10 years. 40+ products. Senior-only team." },
{ num: "02", ttl: "The retainer", desc: "A design team. Without the hiring." },
{ num: "03", ttl: "The math", desc: "Cheaper than a mid-level hire." },
{ num: "04", ttl: "Book a call", desc: "30 minutes with Anna. No pitch." }];


const TEAM_PHOTOS = [
'assets/team/vasyl.png',
'assets/team/as.png',
'assets/team/ac.png',
'assets/team/d.png',
'assets/team/ik.png',
'assets/team/sk.png',
'assets/team/oh.png',
'assets/team/ob.png'];


function Avatar({ seed = 0, size = 64 }) {
  const src = TEAM_PHOTOS[seed % TEAM_PHOTOS.length];
  return (
    <img
      src={src}
      width={size}
      height={size}
      alt=""
      style={{ display: 'block', width: size, height: size, objectFit: 'cover', borderRadius: '50%' }}
      loading="lazy" />);

}

function ClutchBadge() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let s = document.querySelector('script[src="https://widget.clutch.co/static/js/widget.js"]');
    if (!s) {
      s = document.createElement('script');
      s.src = 'https://widget.clutch.co/static/js/widget.js';
      s.async = true;
      document.body.appendChild(s);
    }
    const t = setTimeout(() => {
      if (window.CLUTCHCO && typeof window.CLUTCHCO.Init === 'function') {
        try {window.CLUTCHCO.Init();} catch (e) {}
      }
    }, 600);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="clutch-mount" ref={ref}>
      <div
        className="clutch-widget"
        data-url="https://widget.clutch.co"
        data-widget-type="13"
        data-height="50"
        data-nofollow="false"
        data-expandifr="true"
        data-scale="100"
        data-clutchcompany-id="2330172">
        
        {/* Fallback shown until widget.clutch.co replaces this node */}
        <a className="clutch-badge" href="https://clutch.co" target="_blank" rel="noreferrer">
          <span className="cb-c">
            <svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
              <circle cx="11" cy="11" r="11" fill="#0F1011" />
              <path d="M11 4.5a6.5 6.5 0 0 0 0 13c1.9 0 3.6-.83 4.78-2.15l-2.06-1.8A3.85 3.85 0 0 1 11 14.85a3.85 3.85 0 1 1 2.72-6.55l2.06-1.8A6.48 6.48 0 0 0 11 4.5z" fill="#fff" />
              <circle cx="11" cy="11" r="2.2" fill="#EF4135" />
            </svg>
          </span>
          <span className="cb-score">5.0</span>
          <span className="cb-stars">
            {[0, 1, 2, 3, 4].map((i) =>
            <svg key={i} width="13" height="13" viewBox="0 0 14 14" fill="#EF4135" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 0.5L8.85 4.85L13.5 5.35L10.05 8.55L11 13.1L7 10.7L3 13.1L3.95 8.55L0.5 5.35L5.15 4.85L7 0.5Z" />
              </svg>)}
          </span>
          <span className="cb-reviews">19 reviews</span>
        </a>
      </div>
    </div>);
}

const OUTER_ORBIT = [
{ seed: 0, size: 64 },
{ seed: 1, size: 48 },
{ seed: 2, size: 58 },
{ seed: 3, size: 52 },
{ seed: 4, size: 60 }];
const INNER_ORBIT = [
{ seed: 5, size: 56 },
{ seed: 6, size: 50 },
{ seed: 7, size: 52 }];

function Hero({ onBook }) {
  return (
    <section className="hero-orbit" data-screen-label="01 Hero">
      <div className="orbit-bg" aria-hidden="true" />
      <div className="hero-orbit-inner max">
        <div className="ho-left">
          <h1 className="ho-h1">
            Your embedded<br />design team
          </h1>
          <p className="ho-sub">
            We embed into your product cycle, learn your flows and priorities, and stay. You get a full design team without the hiring, onboarding, or context loss.
          </p>

          <div className="ho-cta">
            <button className="btn btn-primary on-dark" onClick={onBook}>
              Book a call <span className="arr">→</span>
            </button>
          </div>
        </div>

        <div className="ho-right" aria-hidden="true">
          <div className="solar">
            <div className="ring ring-outer" />
            <div className="ring ring-inner" />

            <div className="sun">
              <div className="sun-t">A strong team of<br />real humans</div>
              <div className="sun-s" style={{ fontSize: "9px" }}>NOT AI AGENTS</div>
            </div>

            <div className="orbit outer">
              {OUTER_ORBIT.map((p, i) =>
              <div className="planet" key={"o" + i} style={{ "--angle": i * (360 / OUTER_ORBIT.length) + "deg", "--size": p.size + "px", "--radius": "var(--orbit-r-out)" }}>
                  <div className="planet-inner outer-pi">
                    <Avatar seed={p.seed} size={p.size} />
                  </div>
                </div>)}
            </div>

            <div className="orbit inner reverse">
              {INNER_ORBIT.map((p, i) =>
              <div className="planet" key={"i" + i} style={{ "--angle": i * (360 / INNER_ORBIT.length) + "deg", "--size": p.size + "px", "--radius": "var(--orbit-r-in)" }}>
                  <div className="planet-inner inner-pi">
                    <Avatar seed={p.seed} size={p.size} />
                  </div>
                </div>)}
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ────────────────────────────────────────────────────────────────────
// Awards strip
// ────────────────────────────────────────────────────────────────────
const STRIP = [
{ nm: "Red Dot", ds: "Design Award 2025" },
{ nm: "3× FWA", ds: "Of the Day" },
{ nm: "18× Awwwards", ds: "SOTD · OWDA" },
{ nm: "25× CSS DA", ds: "UI · UX · Innovation" },
{ nm: "11× Behance", ds: "Featured Projects" },
{ nm: "5.0 Clutch", ds: "Verified Reviews" }];


function AwardsStrip() {
  return (
    <section className="wrap">
      <div className="strip max">
        <div className="strip-grid">
          {STRIP.map((s, i) =>
          <div className="strip-cell" key={i}>
              <span className="nm">{s.nm}</span>
              <span className="ds">{s.ds}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// About — split layout, photo placeholder + about copy
// ────────────────────────────────────────────────────────────────────
function ClutchReviewsWidget() {
  const wrapRef = React.useRef(null);
  React.useEffect(() => {
    // Clear any previously rendered iframe inside our div before (re-)init,
    // so the widget rebuilds with current data-* attributes.
    if (wrapRef.current) {
      const stale = wrapRef.current.querySelectorAll('iframe');
      stale.forEach((f) => f.remove());
    }
    let s = document.querySelector('script[src="https://widget.clutch.co/static/js/widget.js"]');
    if (!s) {
      s = document.createElement('script');
      s.src = 'https://widget.clutch.co/static/js/widget.js';
      s.async = true;
      document.body.appendChild(s);
    }
    const t = setTimeout(() => {
      if (window.CLUTCHCO && typeof window.CLUTCHCO.Init === 'function') {
        try {window.CLUTCHCO.Init();} catch (e) {}
      }
    }, 400);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="clutch-reviews" ref={wrapRef}>
      <div
        className="clutch-widget"
        data-url="https://widget.clutch.co"
        data-widget-type="12"
        data-height="375"
        data-nofollow="false"
        data-expandifr="true"
        data-scale="100"
        data-reviews="431408,457088,424468,423655,421684,421678,421030,399476,392450,389789,383820,382600"
        data-clutchcompany-id="2330172" />
      
    </div>);
}

function About({ onBook }) {
  return (
    <section id="about" className="sec wrap" data-screen-label="02 About" style={{ background: '#FAFAFA' }}>
      <div className="max">
        <div className="sec-head" style={{ gap: 12, marginBottom: 0 }}>
          <span className="eyebrow">About us</span>
          <h2 className="h1" style={{ maxWidth: '18ch', marginBottom: 4, lineHeight: "1", fontSize: "55px" }}>
            A senior product design studio that <em style={{ fontStyle: 'italic', fontSize: "55px" }}>stays</em>.
          </h2>
          <p className="body-lg" style={{ maxWidth: '52ch', marginTop: 0 }}>
            We're a small senior team focused on clarity and craft. From product UI to design systems, we help SaaS teams turn ideas into thoughtful, functional experiences: week after week, the same team, the same context.
          </p>
        </div>
      </div>
      <ClutchReviewsWidget />
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Problem (dark)
// ────────────────────────────────────────────────────────────────────
function Problem({ onBook }) {
  return (
    <section id="problem" className="sec dark wrap" data-screen-label="03 Problem">
      <div className="max">
        <div className="sec-head">
          <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>The problem</span>
          <h2 className="h1" style={{ maxWidth: '22ch', color: '#fff' }}>
            Your product is moving. Your design isn't keeping up.
          </h2>
        </div>

        <div className="problem-grid">
          <div className="problem-card">
            <span className="pn">01 / Symptom</span>
            <p>You've got engineers shipping features every sprint. A PM with a backlog that never shrinks. And design: either there's no one doing it, or there's one person doing everything, and it shows.</p>
            <p>The problem isn't effort. It's structure.</p>
          </div>
          <div className="problem-card">
            <span className="pn">02 / Cause</span>
            <p>Design needs to be embedded in the product cycle, not bolted on when something looks broken. It needs someone who knows your flows, edge cases, users.</p>
            <p>Hiring solves this. Eventually. After two months of recruiting, onboarding, and watching a new designer learn your product from scratch. And if they leave, you start over.</p>
          </div>
        </div>

        <div className="prob-video" style={{marginTop:48,borderRadius:14,overflow:'hidden',position:'relative',paddingBottom:'56.25%',height:0}}>
          <iframe
            src="https://player.vimeo.com/video/943659309?badge=0&autopause=0&player_id=0&app_id=58479"
            style={{position:'absolute',top:0,left:0,width:'100%',height:'100%',border:0}}
            allow="autoplay; fullscreen; picture-in-picture"
            allowFullScreen
          />
        </div>

        <div className="problem-cta">
          <div className="l">There's a faster way to get a design team that <span style={{ fontStyle: 'italic' }}>already</span> thinks like part of yours.</div>
          <button className="btn btn-primary" onClick={onBook}>
            Show me how <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// How it works
// ────────────────────────────────────────────────────────────────────
function How({ onBook }) {
  return (
    <section id="how" className="sec wrap" data-screen-label="04 How">
      <div className="max">
        <div className="sec-head" style={{ gap: 12 }}>
          <span className="eyebrow">How it works</span>
          <h2 className="h1" style={{ maxWidth: '18ch', marginBottom: 4 }}>
            Your design team. From $1,600 / month.
          </h2>
          <p className="body-lg" style={{ maxWidth: '52ch', marginTop: 0 }}>
            You send work. We deliver. Every week, same team, same context. No re-onboarding, no catching up from scratch. First delivery within 5 days of kick-off.
          </p>
          <div style={{ marginTop: 24 }}>
            <button className="btn btn-primary" onClick={onBook}>
              Book a 30-min call with Anna <span className="arr">→</span>
            </button>
          </div>
        </div>

        <div className="how-grid">
          {window.HOW_STEPS.map((s, i) =>
          <article className="how-card" key={i}>
              <div className="how-num">{String(i + 1).padStart(2, '0')}</div>
              <h4 className="h4">{s.h}</h4>
              <p className="body">{s.p}</p>
              <div className="meta">
                {s.foot.map((f, j) => <span key={j}>— {f}</span>)}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Team — what you get
// ────────────────────────────────────────────────────────────────────
function Team() {
  return (
    <section className="sec wrap" data-screen-label="05 Team" style={{ paddingTop: 0 }}>
      <div className="max">
        <div className="sec-head">
          <span className="eyebrow">What you get</span>
          <h2 className="h1" style={{ maxWidth: '20ch' }}>
            A design engine, not a pair of hands.
          </h2>
          <p className="body-lg" style={{ maxWidth: '52ch', marginTop: 8 }}>
            Every plan ships with three people. Not three roles billed à la carte — one team, working together, one invoice.
          </p>
        </div>

        <div className="team-grid">
          {window.TEAM.map((t, i) =>
          <article className="team-card" key={i}>
              <div className="role-row">
                <span className="role-no">{t.role.split(' / ')[0]} · {t.role.split('/ ')[1]}</span>
                <span className="role-dot" />
              </div>
              <h4 className="h3">{t.name}</h4>
              <p className="body">{t.body}</p>
              <div className="card-perks">
                {t.perks && t.perks.map((perk, j) => (
                  <div className="card-perk" key={j}>— {perk}</div>
                ))}
              </div>
              <span className="tag">Included · every plan</span>
            </article>
          )}
        </div>

        <div className="team-incl">
          <h5>Every month, without asking:</h5>
          <div className="team-incl-list">
            {window.TEAM_INCL.map((it, i) =>
            <div className="it" key={i}>
                <span className="k">{it.k}</span>
                <span className="v">{it.v}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Deliver (dark)
// ────────────────────────────────────────────────────────────────────
function Deliver() {
  return (
    <section className="sec dark wrap" data-screen-label="06 Deliver">
      <div className="max">
        <div className="sec-head">
          <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>What we deliver</span>
          <h2 className="h1" style={{ maxWidth: '24ch', color: '#fff' }}>
            Tailored digital services for your business.
          </h2>
          <p className="body-lg" style={{ maxWidth: '56ch', marginTop: 8, color: 'rgba(255,255,255,0.6)' }}>
            Three services we do in-house. Three we coordinate through our partner network — so you stay focused on the product and we coordinate what's needed.
          </p>
        </div>

        <div className="del-grid">
          {window.DELIVER.map((d, i) =>
          <div className="del" key={i}>
              <span className="num">{String(i + 1).padStart(2, '0')} / {d.tag === 'Included' ? 'Core' : 'Extended'}</span>
              <h5>{d.h}</h5>
              <p>{d.p}</p>
              <span className={"tag" + (d.tag === 'Included' ? ' included' : '')}>{d.tag}</span>
            </div>
          )}
        </div>

        <div className="speed-strip">
          {window.SPEED.map((s, i) =>
          <div className="speed-cell" key={i}>
              <div className="v">{s.v}</div>
              <div className="k">{s.k}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Math
// ────────────────────────────────────────────────────────────────────
function MathSection() {
  return (
    <section id="math" className="sec wrap" data-screen-label="07 Math">
      <div className="max">
        <div className="sec-head">
          <span className="eyebrow">The math</span>
          <h2 className="h1" style={{ maxWidth: '22ch' }}>
            A full design team for less than one mid-level hire.
          </h2>
          <p className="math-intro">
            Salary is just the start. Add employer taxes, benefits, and recruiting fees — one mid-level product designer costs significantly more than their base pay.
          </p>
        </div>

        <div className="table-wrap">
          <div className="table-cap">
            <h4>What it actually costs to hire in-house</h4>
            <span className="src">Sources: Glassdoor, Levels.fyi (2025–26)</span>
          </div>
          <table className="t">
            <thead><tr>
              <th>Country</th><th>Salary / year</th><th>Taxes & benefits</th><th>Year 1 total</th>
            </tr></thead>
            <tbody>
              {window.MATH_HIRE.map((r, i) =>
              <tr key={i}>
                  <td className="first">{r.country}</td>
                  <td>{r.salary}</td>
                  <td>{r.bens}</td>
                  <td className="accent">{r.total}</td>
                </tr>
              )}
            </tbody>
          </table>
          <p className="t-source">
            Includes employer taxes, benefits, recruiting fee (~15% of salary). Not included: equipment, software licences, 1–2 months onboarding at reduced output.
          </p>
        </div>

        <div className="table-wrap">
          <div className="table-cap">
            <h4>Cosmos vs. alternatives</h4>
            <span className="src">USA benchmark · 80h plan</span>
          </div>
          <table className="t">
            <thead><tr>
              <th></th><th>In-house mid-level</th><th>Freelancer 80h/mo</th><th>Cosmos Retainer 80h</th>
            </tr></thead>
            <tbody>
              {window.MATH_VS_BOTH.map((r, i) =>
              <tr key={i}>
                  <td className="first">{r.k}</td>
                  <td>{r.hire}</td>
                  <td>{r.free}</td>
                  <td className={r.accent ? 'accent' : ''}>{r.cosmos}</td>
                </tr>
              )}
              <tr>
                <td className="first">Annual saving</td>
                <td></td>
                <td></td>
                <td className="save">$133,600+</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Pricing (dark)
// ────────────────────────────────────────────────────────────────────
function Pricing({ onBook }) {
  return (
    <section id="pricing" className="sec dark wrap" data-screen-label="08 Pricing" style={{ padding: 'clamp(72px,9vw,128px) 0' }}>
      <div className="wrap max">
        <div className="pricing-h">
          <span className="eyebrow">Transparent pricing</span>
          <h2 className="pricing-title">Pricing</h2>
        </div>

        <div className="pricing-grid">
          {window.PLANS.map((p, i) =>
          <article className={"price-card" + (p.featured ? " featured" : "")} key={i}>
              <div className="top">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span className="nm">{p.name}</span>
                  <span className="hours">{p.tag}</span>
                </div>
                {p.badge ? <span className="badge">★ {p.badge.replace('★ ', '')}</span> : null}
              </div>
              <div className="plan-team">
                {p.team && p.team.map((m, j) => (
                  <div className="plan-team-row" key={j}>
                    <span className="plan-team-role">
                      {m.count > 1 ? `— ${m.count}× ${m.role}s` : `— ${m.role}`}
                    </span>
                  </div>
                ))}
                {p.sub && <p className="plan-sub">{p.sub}</p>}
              </div>
              <div className="rates">
                {p.rates.map((r, j) =>
              <div className={"price-row" + (r.accent ? " featured" : "")} key={j}>
                    <span className="k">{r.k}</span>
                    <span className="v">{r.v}</span>
                  </div>
              )}
              </div>
              <div className="cta">
                <button
                className={p.featured ? "btn btn-primary" : "btn btn-primary on-dark"}
                onClick={onBook}>
                
                  Start with {p.name} <span className="arr">→</span>
                </button>
              </div>
            </article>
          )}
        </div>

        <div className="pricing-note">
          <div className="it">Hours don't roll over. This keeps your dedicated team fully available and the work moving every month.</div>
          <div className="it">Longer commitments are protected: early cancellation of 3- or 6-month plans is recalculated at the 1-month rate.</div>
        </div>

        <p style={{ marginTop: 32, fontFamily: "'Roboto Mono',monospace", fontSize: 11, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6, maxWidth: '80ch', letterSpacing: 0 }}>
          ALL PLANS INCLUDE — FIGMA FILES · ART DIRECTOR REVIEW · PROJECT MANAGER · WEEKLY 30-MIN SYNC · ASYNC LOOM UPDATES · MONTHLY RECAP · FIRST MONTH UPFRONT TO RESERVE THE TEAM SLOT · INVOICED MONTHLY IN USD.
        </p>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Why Cosmos
// ────────────────────────────────────────────────────────────────────
function Why() {
  return (
    <section className="sec wrap" data-screen-label="09 Why">
      <div className="max">
        <div className="sec-head">
          <span className="eyebrow">Why Cosmos</span>
          <h2 className="h1" style={{ maxWidth: '24ch' }}>10 years. 400+ projects. Most clients stayed for years.

          </h2>
        </div>

        <div className="why-grid">
          {window.WHY.map((w, i) =>
          <div className="why" key={i}>
              <div className="nh">
                <span className="n">{String(i + 1).padStart(2, '0')} /</span>
                <h4 className="h4">{w.h}</h4>
              </div>
              <p className="body">{w.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Cases (Selected partnerships)
// ────────────────────────────────────────────────────────────────────
const WORKS = [
{ year: "2023→", cat: "B2B SaaS", nm: "Ply", tag: "USA · Ongoing", full: 0, url: "https://www.behance.net/gallery/230579469/Ply-Inventory-Management", site: "getply.com", siteUrl: "https://www.getply.com/" },
{ year: "2019—24", cat: "B2B SaaS", nm: "Umami View", tag: "Germany · 5 yrs", full: 1, url: "https://www.behance.net/gallery/158375457/SaaS-Platform-for-Opticians", site: "umami-view.com", siteUrl: "https://umami-view.com/en/" },
{ year: "2023→", cat: "Healthcare", nm: "Zeuss", tag: "USA · Ongoing", full: 2, url: "https://www.behance.net/gallery/143102387/Get-Zeuss-Website", site: "getzeuss.com", siteUrl: "https://getzeuss.com/" }];


function Cases() {
  return (
    <section id="cases" className="sec dark wrap" data-screen-label="10 Cases" style={{ paddingTop: 'clamp(64px, 7vw, 96px)', '--dash': 'rgba(255,255,255,0.15)' }}>
      <div className="max">
        <div className="sec-head">
          <span className="eyebrow" style={{ color: 'var(--on-dark-muted)' }}>Selected partnerships</span>
          <h2 className="h1" style={{ maxWidth: '18ch', color: '#fff' }}>Clients who stayed with us for years</h2>
        </div>

        <div className="works-list">
          {WORKS.map((w, i) => {
            const c = window.CASES[w.full];
            return (
              <article className="case-block" key={i} style={{ borderColor: 'var(--on-dark-line)' }}>
                <header className="work" style={{ borderColor: 'var(--on-dark-line)' }}>
                  <div className="w-nm-wrap">
                    <span className="w-nm" style={{ color: '#fff' }}>{w.nm}</span>
                    {w.siteUrl &&
                    <a
                      className="w-site"
                      href={w.siteUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      style={{ color: 'var(--on-dark-muted)' }}
                      aria-label={`Visit ${w.nm} website`}>
                      <span className="w-site-arr" aria-hidden="true">↗</span>{w.site}
                    </a>
                    }
                  </div>
                  <span className="w-year" style={{ color: 'var(--on-dark-muted)' }}>{w.year}</span>
                  <span className="w-cat" style={{ color: 'var(--on-dark-muted)' }}>{w.cat}</span>
                  <span className="w-tag" style={{ color: 'var(--on-dark-muted)' }}>{w.tag}</span>
                  <span className="w-arr" style={{ color: '#fff' }} aria-hidden="true">→</span>
                </header>
                <div className="case-detail">
                  <div className="cd-l">
                    <p style={{ color: 'var(--on-dark-soft)' }}>{c.body}</p>
                    <p style={{ color: 'var(--on-dark-soft)' }}>{c.body2}</p>
                    {w.url &&
                    <a
                      href={w.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="btn btn-ghost on-dark btn-sm"
                      style={{ marginTop: 18, alignSelf: 'flex-start' }}>
                      View case study
                      <span className="arr" aria-hidden="true">↗</span>
                    </a>
                    }
                  </div>
                  <aside className="cd-r" style={{ background: 'rgba(255,255,255,0.07)', borderColor: 'var(--on-dark-line)' }}>
                    <p className="q" style={{ color: '#fff' }}>"{c.quote}"</p>
                    <div className="src">
                      <div className="av" style={{ background: 'var(--dash)', color: '#fff' }}>{c.quoteInit}</div>
                      <div className="who">
                        <span className="n" style={{ color: '#fff' }}>{c.quoteWho}</span>
                        <span className="r" style={{ color: 'var(--on-dark-muted)' }}>{c.quoteRole}</span>
                      </div>
                    </div>
                  </aside>
                </div>
              </article>);
          })}
        </div>
      </div>
    </section>);
}

// ────────────────────────────────────────────────────────────────────
// FAQ
// ────────────────────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="sec wrap" data-screen-label="11 FAQ">
      <div className="max">
        <div className="faq-grid">
          <div className="faq-h">
            <div className="num-card">
              <span className="lb">Common questions</span>
              <span className="nm">Still got<br />questions?</span>
              <span className="body" style={{ marginTop: 14, maxWidth: '34ch' }}>If yours isn't here, ask Anna on the call. She covers everything from scope to IP to cancellation.</span>
            </div>
          </div>
          <div className="faq">
            {window.FAQS.map((f, i) =>
            <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
                <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="t">{f.q}</span>
                  <span className="ic">+</span>
                </div>
                <div className="faq-a">
                  <div className="faq-a-inner">
                    <div className="faq-a-text">{f.a}</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Calendly / Google Calendar embed
// ────────────────────────────────────────────────────────────────────
function CalEmbed({ height = 580, fallback = false }) {
  const [copied, setCopied] = React.useState(false);
  const email = "anna@cosmos.studio";
  const handleCopy = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const done = () => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1600);
    };
    try {
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(email).then(done).catch(() => fallbackCopy(email, done));
      } else {
        fallbackCopy(email, done);
      }
    } catch (err) {
      fallbackCopy(email, done);
    }
  };
  const fallbackCopy = (text, onDone) => {
    try {
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.top = '0';
      ta.style.left = '0';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      ta.setSelectionRange(0, text.length);
      document.execCommand('copy');
      document.body.removeChild(ta);
      onDone();
    } catch (err) {
      // last resort: just show the copied state so the user knows we tried
      onDone();
    }
  };

  if (fallback) {
    return (
      <div className="cal-card">
        <div className="cal-fb">
          <div className="photo">
            <img src="assets/anna.jpg" alt="Anna Shestakova, Business Developer at Cosmos Studio" />
            <span className="pin"><span className="dot"></span>Available this week</span>
          </div>
          <div className="body">
            <div className="id-row">
              <span className="who-n">Anna Shestakova</span>
              <span className="who-r">Business Developer · Cosmos Studio</span>
            </div>
            <div className="email-row">
              <a className="email-link" href={`mailto:${email}`}>
                <svg className="email-ic" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <rect x="1.5" y="3.5" width="13" height="9" rx="1.2" stroke="currentColor" strokeWidth="1.2" />
                  <path d="M2 4.5l6 4 6-4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round" />
                </svg>
                <span className="email-text">{email}</span>
              </a>
              <button
                type="button"
                className="email-copy"
                onClick={handleCopy}
                aria-label={copied ? "Email copied" : "Copy email"}>
                {copied ?
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                    <path d="M3 8.5l3.5 3.5L13 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                  </svg> :

                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                    <rect x="5" y="5" width="9" height="9" rx="1.4" stroke="currentColor" strokeWidth="1.2" />
                    <path d="M11 5V3.4A1.4 1.4 0 0 0 9.6 2H3.4A1.4 1.4 0 0 0 2 3.4v6.2A1.4 1.4 0 0 0 3.4 11H5" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round" />
                  </svg>
                }
              </button>
              {copied && <span className="email-toast" role="status">Copied</span>}
            </div>
            <p>Book a 30-min intro call. No pitch, no scripts — Anna asks the right questions and tells you straight whether we're the right fit.</p>
            <a className="btn btn-primary open" href={GOOGLE_CAL_URL} target="_blank" rel="noreferrer">
              Book a call <span className="arr">→</span>
            </a>
          </div>
        </div>
      </div>);

  }
  return (
    <div className="cal-card">
      <iframe src={GOOGLE_CAL_URL} height={height} title="Book a 30-min call with Anna" />
    </div>);

}

// ────────────────────────────────────────────────────────────────────
// Final CTA — "Start your project with Cosmos™"
// ────────────────────────────────────────────────────────────────────
function FinalCTA({ bookRef }) {
  return (
    <section ref={bookRef} id="book" className="sec wrap" data-screen-label="12 Book">
      <div className="max">
        <div className="final-wm">
          <div className="wm-l" style={{ display: 'flex', gap: 6 }}>
            <span className="display">Start your project</span>
          </div>
        </div>
        <div className="final-wm" style={{ marginTop: 0 }}>
          <span className="display">with Cosmos<sup className="display" style={{ fontSize: '0.45em', marginTop: '0.18em', lineHeight: 1 }}>™</sup></span>
        </div>

        <div className="final-grid" style={{ marginTop: 48 }}>
          <div className="final-form">
            <span className="eyebrow" style={{ alignSelf: 'flex-start' }}>The path forward</span>
            <h3 className="h3" style={{ margin: 0, maxWidth: '18ch' }}>From "hi" to first delivery in 5 days.</h3>
            <p className="body" style={{ margin: 0, maxWidth: '42ch' }}>
              Book a 30-minute call with Anna, our client lead. No pitch, no pressure. She'll ask the right questions, map your needs, and tell you honestly whether we're the right fit. If not, she'll say so.
            </p>
            <div className="steps">
              {window.STEPS.map((s, i) =>
              <div className="step-row" key={i}>
                  <span className="sn">{s.n}</span>
                  <div>
                    <span className="st-h">{s.h}</span>
                    <span className="st-p">{s.p}</span>
                  </div>
                </div>
              )}
            </div>
            <p className="body" style={{ margin: 0, fontStyle: 'italic', color: 'var(--muted-2)', maxWidth: '40ch' }}>
              Not sure yet? Most retainer clients started with a single project. If you want to see how we work first, that's where we usually begin.
            </p>
          </div>

          <CalEmbed height={620} fallback />
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Big wordmark + footer
// ────────────────────────────────────────────────────────────────────
function BigWordmark() {
  return (
    <section className="wrap" aria-hidden="true">
      <div className="max big-wm">
        Cosmos<span className="tm">™</span>
      </div>
    </section>);

}

function Footer() {
  return (
    <>
    <div className="wrap" style={{borderTop:'1px solid var(--dash)'}}>
      <div className="max industries-strip" style={{fontSize:13,color:'var(--muted)',letterSpacing:'0.04em',textTransform:'uppercase',padding:'24px 0'}}>
        <span style={{marginRight:8,color:'var(--ink)'}}>Industries:</span>
        SaaS · FinTech · HealthTech · EdTech · Web3 · GameDev · IT Services
      </div>
    </div>
    <footer className="foot foot-logo wrap">
      <div className="max">
        <img
          src="assets/cosmos-logo-full-black.svg"
          alt="Cosmos Studio"
          className="foot-logo-img" />

      </div>
    </footer>
    </>);

}

Object.assign(window, {
  Nav, Hero, AwardsStrip, About, Problem, How, Team, Deliver, MathSection,
  Pricing, Why, Cases, FAQ, FinalCTA, BigWordmark, Footer
});