/* Viralis — The Independent Label Office · sections */

const { useState, useEffect, useRef } = React;

// ============ LOGO MARKS ============
// Brand V mark — uses the textured PNG specimens from the violet branding package.
// Both palette versions are rendered; CSS shows only the one matching [data-mode] on <html>.
// `tone` prop is preserved as a hint for callers but the active variant is now palette-driven.
function VMark({ tone = "ink", style = {} }) {
  return (
    <span className="vmark-img" style={style}>
      <img src="logo-ink.png"  alt="Viralis" className="vmark-ink"  />
      <img src="logo-bone.png" alt=""        className="vmark-bone" aria-hidden="true" />
    </span>
  );
}

// Wordmark: V-mark + "iralis" italic serif
function Wordmark({ size = 26, italic = true }) {
  return (
    <span className="wordmark" style={{ fontSize: size }}>
      <span className="v-cap">
        <VMark tone="ink" />
      </span>
      <span className="rest">iralis</span>
    </span>
  );
}

// ============ NAV ============
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-brand">
          <Wordmark size={28} />
          <span className="descr">The Independent<br/>Label Office</span>
        </div>
        <div className="nav-links">
          <a href="#practice">Practice</a>
          <a href="#engagements">Engagements</a>
          <a href="#operating-system">Operating System</a>
          <a href="#standard">Standard</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#apply" className="nav-cta">Apply →</a>
      </div>
    </nav>
  );
}

// ============ HERO ============
function Hero() {
  const [ref, inView] = useInView();
  return (
    <section className="hero" ref={ref}>
      <div className="wrap">
        <div className={"eyebrow fade " + (inView ? "in" : "")}>Viralis · The Independent Label Office</div>
        <div className="hero-grid">
          <div>
            <h1 className={"hero-headline reveal-words " + (inView ? "in" : "")}>
              The <em>agentic</em> label office for executives who left the system — and kept the standards.
            </h1>
            <p className="hero-deck">
              Major-label campaign output. Independent operating economics. Run by senior operators on top of an agentic system.
            </p>
            <p className="hero-body">
              Viralis runs priority-artist campaigns for music executives building outside the majors — marketing, DSPs, radio, sync, brand partnerships, creator activation, PR, and distributor positioning — through an agentic operating system that absorbs the rote work and lets a senior lead carry three priority artists instead of one. You hire the firm. You read the memo. You never touch the software.
            </p>
            <div className="hero-cta-row">
              <a href="#apply" className="btn-primary">Apply for a Catalog &amp; Career Audit <span>→</span></a>
              <a href="#principal" className="btn-link">or speak to a principal →</a>
            </div>
          </div>

          <aside className="hero-ornament">
            <div className="v-monogram"><VMark tone="ink" /></div>
            <div>
              <span className="ver">v. 2.0</span>
              <div className="stamp">An agentic firm for music</div>
            </div>
            <div>
              Los Angeles · New York<br/>
              Nashville · London · Atlanta
            </div>
            <div className="est">Est. 2026 · viralis.app</div>
          </aside>
        </div>
      </div>
    </section>
  );
}

// ============ CREDIBILITY ============
function Credibility() {
  return (
    <section className="cred">
      <div className="wrap">
        <p className="cred-line">
          Built by operators who ran priority campaigns at the institutions that defined the modern record business.
        </p>
        <div className="cred-logos">
          <span>Universal</span>
          <span>Sony</span>
          <span>Warner</span>
          <span>Concord</span>
          <span>BMG</span>
          <span>EMPIRE</span>
          <span>AWAL</span>
        </div>
        <p className="cred-foot">
          Logos shown only where leadership represents the firm on staff.
        </p>
      </div>
    </section>
  );
}

// ============ I · THE GAP ============
function Gap() {
  return (
    <section className="big-block" id="gap">
      <div className="wrap">
        <div className="eyebrow">I · The Gap</div>
        <h3>You ran a priority budget. <em>Now you don't.</em></h3>
        <div className="big-block-grid">
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-dim)" }}>
            On the rebuild cost<br/>of the apparatus<br/>you used to run.
          </div>
          <div>
            <p>You used to brief a six-person team for a single album cycle. Marketing. Digital. Radio. Sync. Press. Brand. They reported to you. You reported up. The campaign moved.</p>
            <p>You're building independently now. The artist is real. The thesis is right. The capital is in place. What's missing is the operating apparatus you used to take for granted — and the budget reality that made it possible.</p>
          </div>
          <div>
            <p>Rebuilding that team in-house is a $1.5–2M annual line for a single artist. Stitching together a marketing agency, a sync rep, a PR firm, a radio promoter, and a creator shop runs $40–80K monthly and produces work that doesn't add up. And the modern playlist-promotion and AI-tool market is, charitably, beneath your standard.</p>
          </div>
        </div>
        <p className="pull"><em>That's the gap.</em></p>
      </div>
    </section>
  );
}

// ============ II · PRACTICE ============
function Practice() {
  return (
    <section className="sec" id="practice">
      <div className="wrap">
        <div className="eyebrow">II · Practice</div>
        <div className="sec-header">
          <div className="roman"><b>§ Practice</b>Run by one office. One operating partner. One senior lead per artist.</div>
          <h2>The priority-marketing apparatus you used to brief — <em>run by one office.</em></h2>
        </div>
        <div className="practice-prose">
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-dim)" }}>
            One operating partner.<br/>
            One senior lead per artist.<br/>
            Friday memo.<br/>
            Monthly review.<br/>
            Quarterly assessment.
          </div>
          <div>
            <p className="lead">The Independent Label Office runs the priority-marketing apparatus you used to brief. One operating partner. One senior lead per artist. One Friday memo, one monthly review, one quarterly assessment — the cadence you ran at the label.</p>
            <p>DSP campaign strategy, including the Spotify pitch program, Marquee, Showcase, and Discovery Mode, with comparable programs across Apple, Amazon, YouTube Music, and Tidal. Radio promotion through the boutique firms you already know. Sync solicitation tied to release windows and active brief feeds. PR through retainer or release-by-release. Creator and influencer activation — the modern equivalent of the mix-show and tastemaker desks you used to run. Brand partnership ideation and outbound. Tour marketing and venue and promoter positioning. Owned-audience capture, fan club, and superfan monetization. Visual identity, photography, and video coordinated through partner network. Quarterly catalog and IP audit. And — at the moment the artist becomes interesting to a distributor, label JV, or strategic partner — the Distributor Positioning Pack and the introductions to run that conversation.</p>
            <div className="quote">You never log into a dashboard. You do not manage vendors. You do not chase trends.</div>
            <p>You get the campaign, the reporting, and the deal-readiness work.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ III · NUMBERS ============
function NumberRow({ row, i, active }) {
  return (
    <div className={"nrow " + (active ? "in" : "")} style={{ transitionDelay: (i * 80) + "ms" }}>
      <div className="roman">№ {String(i + 1).padStart(2, "0")} · {row[0]}</div>
      <div className="old"><span className="strike-track">{row[1]}</span></div>
      <div className="new"><em>{row[2]}</em><span className="small">{row[3]}</span></div>
    </div>
  );
}
function Numbers() {
  const rows = [
    ["Priority single marketing cycle", "$250–500K", "$65,000", "+ media"],
    ["Priority artist annual marketing P&L", "$750K–1.5M", "$180–300K", "+ media"],
    ["Standalone PR retainer", "$10–25K / mo", "bundled", ""],
    ["Standalone sync representation", "25% of placements", "bundled", ""],
    ["Boutique radio promotion / single", "$25–100K", "coordinated", "within campaign"],
    ["Mid-level marketing director, loaded", "$250K+ / yr", "less than one role", "you used to manage"],
  ];
  const [ref, inView] = useInView({ threshold: 0.15, once: true });
  return (
    <section className="sec" id="numbers">
      <div className="wrap">
        <div className="eyebrow">III · The Numbers</div>
        <div className="sec-header">
          <div className="roman"><b>§ Numbers</b>You lived the system budget.</div>
          <h2>You lived the system budget. <em>You know what a real campaign costs.</em></h2>
        </div>
        <div className="numbers-table" ref={ref}>
          {rows.map((r, i) => (
            <NumberRow row={r} i={i} key={i} active={inView} />
          ))}
        </div>
        <p className="pull"><em>We're delivering the campaign for a third — and you didn't have to rebuild the team.</em></p>
      </div>
    </section>
  );
}

// ============ IV · ENGAGEMENTS ============
function Engagements() {
  const eng = [
    {
      num: "i",
      title: "Catalog & Career Audit",
      em: "Audit",
      price: "$7,500",
      blurb: "A two-week senior diagnostic. Not a marketing audit; a label-grade strategic memo.",
      body: "Catalog and IP review across masters, publishing, splits, registrations, and neighboring rights. Audience baseline across DSPs, social, and owned channels. Release strategy assessment with sequencing, cadence, and format mix. A&R sounding board on the next four-to-eight releases. Brand and identity review. Comp-set positioning. Twelve-month development thesis with three campaign options. Distributor, JV, and partnership readiness assessment.",
      foot: ["Two weeks · 90-min review", "Credit applied if engaged ≤ 60d"],
    },
    {
      num: "ii",
      title: "90-Day Launch Sprint",
      em: "Sprint",
      price: "$65,000 + media",
      blurb: "A complete priority-release cycle for a single, EP, or album.",
      body: "Marketing creative direction and asset oversight. DSP strategy and editorial positioning. Radio coordination where format-relevant. PR campaign and press relations. Creator and influencer activation. Paid media testing. Brand partnership outbound. Sync solicitation tied to the release window. Owned-audience capture, fan-CRM, and superfan layer. Tour marketing support if relevant. Weekly campaign memo. Monthly executive review. End-of-cycle Distributor Positioning Pack.",
      foot: ["90 days · weekly memo", "$25–150K media · approved by you"],
    },
    {
      num: "iii",
      title: "Annual Artist Development Partnership",
      em: "Partnership",
      price: "$180–300K / artist / year",
      blurb: "The replacement for the priority-marketing line you used to run.",
      body: "The Launch Sprint repeated across the release calendar, with the long-arc work the system used to provide. Continuous A&R sounding board and release sequencing. Visual identity and content system. Standing PR retainer. Sync library placement and active solicitation. Brand partnership pipeline. Creator relationship management. Touring support and venue and promoter positioning. D2C, fan-club, and superfan monetization. Quarterly catalog and IP audit. Direct distributor and label JV positioning.",
      foot: ["Named senior lead", "Capped at three priority artists"],
    },
    {
      num: "iv",
      title: "Imprint Partnership",
      em: "Imprint",
      price: "Custom · $600K–1.5M / yr",
      blurb: "For boutique labels, services companies, and artist joint ventures with three-to-eight priority artists.",
      body: "Roster prioritization. Shared infrastructure. Executive-level reviews. Custom reporting. Direct distributor relationship management across the imprint. Annual contract with quarterly true-up. Available with negotiated per-artist upside participation where the Office materially contributes to a deal moment — never on a default basis.",
      foot: ["Annual · quarterly true-up", "By invitation"],
    },
  ];
  return (
    <section className="sec" id="engagements">
      <div className="wrap">
        <div className="eyebrow">IV · Engagements</div>
        <div className="sec-header">
          <div className="roman"><b>§ Engagements</b>Four ways in.</div>
          <h2>Four ways in. <em>Each one ends with a memo you can hold.</em></h2>
        </div>
        <div className="eng-grid">
          {eng.map((e, i) => (
            <div className="eng" key={i}>
              <div className="eng-num">№ {e.num.toUpperCase()}</div>
              <h4>{e.title.replace(e.em, "")}<em>{e.em}</em></h4>
              <div className="price">{e.price}</div>
              <div className="blurb">{e.blurb}</div>
              <p className="body">{e.body}</p>
              <div className="foot">
                <span>{e.foot[0]}</span>
                <span>{e.foot[1]}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ V · DOCUMENT ============
function Document() {
  return (
    <section className="sec" id="document">
      <div className="wrap">
        <div className="eyebrow">V · The Document</div>
        <div className="sec-header">
          <div className="roman"><b>§ Document</b>Most agencies sell activity.</div>
          <h2>The Distributor <em>Positioning Pack.</em></h2>
        </div>
        <div className="doc">
          <div className="doc-text">
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.35, marginBottom: 24 }}>
              Most agencies sell activity. We deliver the document the next conversation requires.
            </p>
            <p>A twelve-month campaign and audience trend analysis with comp set. Catalog and IP inventory with valuation framework. Audience composition and superfan analysis.</p>
            <p>Touring data, market by market. Sync activity and brand partnership pipeline. Press, creator, and editorial recap. Strategic narrative and positioning memo. A distributor-specific pitch deck — Stem, AWAL, EMPIRE, Symphonic, ADA, The Orchard, Believe, Vydia, others on request. Direct introduction to the relationship contact when the timing is right.</p>
            <div className="price-strip">
              <span>Bundled · Annual Partnership</span>
              <span>Standalone · <em>$15,000</em></span>
            </div>
          </div>
          <DocPlate />
        </div>
      </div>
    </section>
  );
}

function DocPlate() {
  const [ref, inView] = useInView({ threshold: 0.25 });
  const tocItems = [
    "i. Campaign & trend analysis",
    "ii. Catalog & IP inventory",
    "iii. Audience composition",
    "iv. Superfan analysis",
    "v. Touring data, market-by-market",
    "vi. Sync & brand pipeline",
    "vii. Press & creator recap",
    "viii. Strategic narrative",
    "ix. Distributor-specific deck",
    "x. Introduction list",
  ];
  const shown = useStaggered(tocItems, { delay: 90, start: 350, active: inView });
  return (
    <div className={"doc-plate " + (inView ? "in" : "")} ref={ref}>
      <span className="corner c-tl">Specimen</span>
      <span className="corner c-tr">5:2 · 32 pp.</span>
      <div>
        <h3 className="plate-title">Distributor<br/><em>Positioning</em><br/>Pack.</h3>
      </div>
      <div className="plate-mid">
        <span>VRL · DPP · v.2.0</span>
        <span>Confidential</span>
      </div>
      <div className="toc">
        {tocItems.map((t, i) => (
          <div key={i} className="toc-line" style={{ opacity: i < shown ? 1 : 0, transform: i < shown ? "translateY(0)" : "translateY(6px)" }}>{t}</div>
        ))}
      </div>
      <span className="corner c-bl">For senior review only</span>
      <span className="corner c-br">v. 2.0</span>
    </div>
  );
}

// ============ VI · OPERATING SYSTEM ============
function OperatingSystem() {
  return (
    <section className="sec" id="operating-system">
      <div className="wrap">
        <div className="eyebrow">VI · The Operating System</div>
        <div className="sec-header">
          <div className="roman"><b>§ Operating System</b>Boutique firm. Software underneath.</div>
          <h2>An agentic operating system. <em>Run by senior music operators.</em></h2>
        </div>
        <div className="os-wrap">
          <div className="os-text">
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.35 }}>
              Viralis is a boutique firm with a software layer underneath. The senior operator is the person you hire, the person you call, and the person who answers for the campaign. The agentic system is what lets that operator carry three priority artists at major-label standard instead of one.
            </p>
            <h5>Senior operators in the seat.</h5>
            <p>You talk to the operator you would have hired. They run the campaign. They answer to you. The system runs underneath them, not above them — and never to you.</p>
            <h5>The system absorbs the junior team.</h5>
            <p>Vendor coordination, compliance checks, source-mix monitoring, pitch drafting, reporting, eligibility tracking, anomaly detection. The work that used to require a marketing coordinator, an analyst, and a junior strategist runs on agents.</p>
            <h5>Vendor coordination, not vendor ownership.</h5>
            <p>We do not run a radio promotion team in-house. We coordinate the boutique firm you used to retain. Same for sync libraries, PR agencies, creator shops, photographers, video directors. You get the vendor benefit without the vendor management.</p>
            <h5>No system overhead.</h5>
            <p>No corporate marketing committee. No quarterly priority horse-trading. No internal political costs. Decisions in the room. Campaign in market in two weeks instead of eight.</p>
          </div>
          <div className="manifest">
            <div className="head">The Viralis Operating System · v. 2.0 · behind the wall</div>
            <ol>
              <li>Vendor router &amp; safety classifier</li>
              <li>Compliance governor</li>
              <li>Eligibility resolver — Marquee · Showcase · Discovery Mode</li>
              <li>Campaign analytics &amp; weekly memo</li>
              <li>Source-mix &amp; anomaly monitor</li>
              <li>Pitch &amp; brief generation</li>
              <li>Royalty &amp; catalog reconciliation</li>
              <li>Distributor positioning pack</li>
            </ol>
            <div className="foot">
              <span>Senior operators run it</span>
              <span>You read the memo</span>
            </div>
          </div>
        </div>
        <div className="os-quote">
          We are a boutique agency, built on agents. The operators are the firm. The system is the leverage. <em>The price is what falls out.</em>
        </div>
      </div>
    </section>
  );
}

// ============ VII · FIT ============
function Fit() {
  return (
    <section className="sec" id="fit">
      <div className="wrap">
        <div className="eyebrow">VII · Fit</div>
        <div className="sec-header">
          <div className="roman"><b>§ Fit</b>We turn engagements down.</div>
          <h2>We turn engagements down. <em>We'd rather tell you now.</em></h2>
        </div>
        <div className="fit-grid">
          <div className="fit-col">
            <h5>For</h5>
            <ul>
              <li><span className="glyph">·</span><span>Music executives who spent a decade or more inside the major or premium-indie system and now run a label, management company, services firm, or artist joint venture.</span></li>
              <li><span className="glyph">·</span><span>Teams with one-to-eight priority artists, real twelve-month development theses, and capital allocated to artist development.</span></li>
              <li><span className="glyph">·</span><span>Operators who want major-label campaign output without major-label headcount, overhead, or politics.</span></li>
            </ul>
          </div>
          <div className="fit-col bad">
            <h5 className="bad">Not for</h5>
            <ul>
              <li><span className="glyph">—</span><span>Teams chasing virality moments without a development thesis.</span></li>
              <li><span className="glyph">—</span><span>Artists looking for guaranteed streams or playlist placement.</span></li>
              <li><span className="glyph">—</span><span>Anyone trying to manipulate platforms or buy DSP outcomes.</span></li>
              <li><span className="glyph">—</span><span>Projects without committed marketing budget or willingness to create.</span></li>
              <li><span className="glyph">—</span><span>Buyers who want a SaaS dashboard.</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ VIII · STANDARD ============
function Standard() {
  const items = [
    ["Named senior lead", "A real operator with the bio in your engagement letter. Capped at three priority artists."],
    ["Weekly campaign memo", "Every Friday. Written, not dashboard. What we did, what we observed, what we recommend, what we need from you."],
    ["Monthly executive review", "Sixty minutes with the senior lead and a principal. Campaign, P&L attribution, next thirty days, escalations."],
    ["Quarterly artist development assessment", "Catalog, audience, brand, deal-readiness. The kind of memo that used to circulate at the label."],
    ["Thirty-day grace exit", "If within the first thirty days you are not satisfied with the senior lead, the strategic direction, or the working relationship, the engagement terminates with a prorated refund."],
    ["Lead replacement clause", "If a lead becomes the wrong fit, we replace them within thirty days at no cost. You never inherit a personnel problem we created."],
  ];
  return (
    <section className="sec" id="standard">
      <div className="wrap">
        <div className="eyebrow">VIII · The Standard</div>
        <div className="sec-header">
          <div className="roman"><b>§ Standard</b>How the better label-services shops contract.</div>
          <h2>How the better label-services shops <em>actually contract.</em></h2>
        </div>
        <div className="std-grid">
          {items.map((it, i) => (
            <div className="std" key={i}>
              <div className="num">§ {String(i + 1).padStart(2, "0")}</div>
              <h6>{it[0]}</h6>
              <p>{it[1]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ IX · CAPACITY ============
function Capacity() {
  return (
    <section className="sec" id="capacity">
      <div className="wrap">
        <div className="eyebrow">IX · Capacity</div>
        <div className="sec-header">
          <div className="roman"><b>§ Capacity</b>Three priority artists per lead.</div>
          <h2>Each lead carries no more than <em>three priority artists.</em></h2>
        </div>
        <div className="practice-prose">
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-dim)" }}>
            2–4 priority artists<br/>
            onboarded per quarter<br/>
            across the firm.
          </div>
          <div>
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 24, lineHeight: 1.3 }}>
              We onboard two-to-four priority artists per quarter across the firm. When that capacity is committed, we tell you the next available start date. We do not stretch a lead to take your engagement, and we do not let the system stretch in their place.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ X · PROCESS ============
function Process() {
  const steps = [
    ["i.", "Your inquiry is reviewed by a principal within two business days."],
    ["ii.", "A thirty-minute introductory call to confirm fit and scope."],
    ["iii.", "A Catalog & Career Audit engagement letter, or a graceful referral if the fit is not there."],
    ["iv.", "The audit delivered within two weeks: senior memo, 90-minute review."],
    ["v.", "Partnership scoped from the audit, or graceful exit with the audit deliverable in your hands either way."],
  ];
  return (
    <section className="sec" id="process">
      <div className="wrap">
        <div className="eyebrow">X · The Process</div>
        <div className="sec-header">
          <div className="roman"><b>§ Process</b>Five steps. Two business days.</div>
          <h2>Five steps. <em>Two business days to the first reply.</em></h2>
        </div>
        <div className="proc-list">
          {steps.map((s, i) => (
            <div className="proc" key={i}>
              <div className="step">{s[0]}</div>
              <div className="body">{s[1]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ XI · FAQ ============
function FAQ() {
  const qs = [
    ["How is this different from a marketing agency?",
      "A marketing agency runs campaigns. We run an artist development arc, with the campaign as one component, and we deliver the deal-readiness documentation that becomes leverage in your distributor and partner conversations."],
    ["How is this different from AWAL, Stem, or EMPIRE services?",
      "We are not a distributor. We do not take rights, recoupable advances, or a percentage of recordings. We work for a flat fee alongside whatever distribution and rights structure you already have. When the moment comes, we position you for the conversation with the distributor of your choice — including the ones above."],
    ["How is the technology actually used?",
      "Viralis is an agentic firm. The Viralis operating system — vendor router, compliance governor, eligibility resolver, source-mix monitor, pitch generation, analytics — runs the work that used to require a marketing coordinator, an analyst, and a junior strategist. Our senior operators run the system. You read the Friday memo. You will not log in to anything."],
    ["Do you take points or upside?",
      "Standard engagements are flat-fee. For Imprint Partnerships and select Annual Partnerships where the Office materially contributes to a deal moment, we will negotiate per-artist upside participation. Never on a default basis."],
    ["Will I work with the same lead the entire engagement?",
      "Yes. The named senior lead is committed to your artist for the full engagement. If we ever need to change leads, the replacement clause applies."],
    ["Can you guarantee streams, playlist placement, or going viral?",
      "No. Anyone who tells you otherwise is either misinformed or selling something that violates DSP terms of service. We guarantee operating standard, not creative outcomes — because that is the only honest position."],
    ["What's the typical media budget?",
      "For a Launch Sprint, plan $25–150K depending on artist stage and ambition. For an Annual Partnership, plan $150–500K across the year. Media spend is yours to approve and reconcile; we recommend, scope, and run it."],
    ["Do you work with artists directly?",
      "We work with executive-led teams. Managers, label principals, services-company operators, and artist joint ventures. We do not engage directly with unrepresented artists."],
    ["Where are you based?",
      "Distributed. Operators in Los Angeles, New York, Nashville, London, and Atlanta. Most engagements run remotely with quarterly in-person reviews."],
    ["Are you signing artists?",
      "No. We are an operating partner, not a label. The artist's masters, publishing, distribution, and rights structure remain entirely yours."],
  ];
  return (
    <section className="sec" id="faq">
      <div className="wrap">
        <div className="eyebrow">XI · Frequently Asked</div>
        <div className="sec-header">
          <div className="roman"><b>§ FAQ</b>Plain answers.</div>
          <h2>Plain answers. <em>The kind we'd give on the call.</em></h2>
        </div>
        <div className="faq-list">
          {qs.map((q, i) => (
            <div className="faq-item" key={i}>
              <h4>{q[0]}</h4>
              <p>{q[1]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ FINAL CTA ============
function FinalCTA() {
  return (
    <section className="final-cta" id="apply">
      <div className="wrap">
        <div className="eyebrow" style={{ justifyContent: "center" }}>The Next Conversation</div>
        <h2>A thirty-minute call <em>with a principal.</em></h2>
        <div className="actions">
          <a href="mailto:hello@viralis.app" className="btn-primary">Apply for a Catalog &amp; Career Audit <span>→</span></a>
        </div>
        <div className="note">hello@viralis.app · Inquiries reviewed within two business days.</div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <Wordmark size={56} />
            <p className="descr">The Independent Label Office · hello@viralis.app · viralis.app</p>
          </div>
          <div className="foot-col">
            <h6>Offices</h6>
            <ul>
              <li><a>Los Angeles</a></li>
              <li><a>New York</a></li>
              <li><a>Nashville</a></li>
              <li><a>London</a></li>
              <li><a>Atlanta</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h6>Firm</h6>
            <ul>
              <li><a href="#practice">Practice</a></li>
              <li><a href="#engagements">Engagements</a></li>
              <li><a href="#standard">Operating Standard</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#apply">Apply</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h6>Standards</h6>
            <ul>
              <li><a>Privacy</a></li>
              <li><a>Terms</a></li>
              <li><a>Engagement Standards</a></li>
            </ul>
          </div>
        </div>

        <div className="foot-mark">
          <div className="v-monogram"><VMark tone="ink" /></div>
        </div>

        <div className="foot-bottom">
          <span>© 2026 Viralis · The Independent Label Office</span>
          <span>viralis.app</span>
          <span>v. 2.0 · Est. 2026</span>
        </div>
      </div>
    </footer>
  );
}

// expose
Object.assign(window, {
  VMark, Wordmark, Nav, Hero, Credibility, Gap, Practice, Numbers,
  Engagements, Document, OperatingSystem, Fit, Standard, Capacity, Process, FAQ,
  FinalCTA, Footer
});
