// Shared building blocks — Header, Footer, PageHead, helpers, tier card, pillar diagram
const { useState, useEffect, useRef } = React;

const NAV_LINKS = [
  { id: "index.html", label: "Home" },
  { id: "who.html", label: "Who This Is For" },
  { id: "pricing.html", label: "Pricing" },
  { id: "about.html", label: "About" },
  { id: "contact.html", label: "Contact" },
];

function Header({ active }) {
  return (
    <header className="site">
      <div className="wrap row">
        <a href="index.html" className="brand">
          <span><img src="assets/logo-strip.png" height="36" alt="GrowthOS" /></span>
        </a>
        <nav className="main">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={l.id} className={active === l.id ? "active" : ""}>{l.label}</a>
          ))}
        </nav>
        <div className="header-cta">
          <a className="btn btn-dark" href="contact.html">
            Book a Consultation <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

function PageHead({ num, label, title, lede }) {
  return (
    <div className="wrap">
      <div className="page-head">
        <div className="meta">
          <span className="num">{num}</span>
          <span className="eyebrow">{label}</span>
        </div>
        <div>
          <h2 dangerouslySetInnerHTML={{ __html: title }} />
          {lede && <p className="lede" style={{marginTop: 24, maxWidth: 720}}>{lede}</p>}
        </div>
      </div>
    </div>
  );
}

// Generic CTA strip used across pages
function CTAStrip({ title, sub }) {
  return (
    <section className="page cta-bar">
      <div className="wrap">
        <div className="row">
          <div>
            <h3 dangerouslySetInnerHTML={{ __html: title }} />
            {sub && <p className="lede" style={{marginTop: 16, maxWidth: 560}}>{sub}</p>}
          </div>
          <div className="ctas">
            <a className="btn btn-primary" href={window.ASSESSMENT_URL || "#"} target="_blank" rel="noopener">
              Take the Assessment <span className="arrow">↗</span>
            </a>
            <a className="btn btn-ghost" href="contact.html">
              Book a Call
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function PillarDiagram() {
  return (
    <svg viewBox="0 0 400 380" className="pillar-svg" preserveAspectRatio="xMidYMid meet">
      <defs>
        <pattern id="dots" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.7" fill="#0B1B33" opacity="0.18" />
        </pattern>
      </defs>
      <circle cx="140" cy="170" r="120" fill="url(#dots)" stroke="#0B1B33" strokeWidth="1" opacity="0.9" />
      <circle cx="260" cy="170" r="120" fill="none" stroke="#FF6A1F" strokeWidth="1.2" strokeDasharray="3 3" />
      <circle cx="260" cy="170" r="120" fill="#FF6A1F" opacity="0.05" />
      <text x="80" y="34" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5A6478" letterSpacing="1.4">EXTERNAL</text>
      <text x="280" y="34" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#C24A0A" letterSpacing="1.4">INTERNAL</text>
      <line x1="80" y1="44" x2="160" y2="44" stroke="#0B1B33" strokeWidth="0.8" />
      <line x1="280" y1="44" x2="360" y2="44" stroke="#FF6A1F" strokeWidth="0.8" />
      <text x="60" y="170" fontFamily="Instrument Serif" fontSize="22" fill="#0B1B33">Visibility</text>
      <text x="60" y="195" fontFamily="Instrument Serif" fontSize="22" fontStyle="italic" fill="#0B1B33">Trust</text>
      <text x="60" y="220" fontFamily="Instrument Serif" fontSize="22" fill="#0B1B33">Messaging</text>
      <text x="290" y="170" fontFamily="Instrument Serif" fontSize="22" fill="#0B1B33">Focus</text>
      <text x="290" y="195" fontFamily="Instrument Serif" fontSize="22" fontStyle="italic" fill="#0B1B33">Decisions</text>
      <text x="290" y="220" fontFamily="Instrument Serif" fontSize="22" fill="#0B1B33">Execution</text>
      <circle cx="200" cy="170" r="22" fill="#0B1B33" />
      <circle cx="200" cy="170" r="22" fill="none" stroke="#FF6A1F" strokeWidth="1.5" strokeDasharray="2 2" />
      <text x="200" y="174" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#fff" letterSpacing="1.2">OS</text>
      <line x1="200" y1="312" x2="200" y2="346" stroke="#0B1B33" strokeWidth="0.8" />
      <text x="200" y="364" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5A6478" letterSpacing="1.4">→ ACTION PLAN</text>
    </svg>
  );
}

// Tier data — shared across home/pricing
const TIERS = [
  {
    no: "01",
    name: "Diagnostic",
    nameItalic: "review",
    tagline: "Clarity before commitment. Understand what's blocking growth and what to do first.",
    fit: "Solo, small biz, early startups",
    weeks: "~ 1 month",
    price: "$4.5k",
    items: [
      "Full external + internal review",
      "Stakeholder interviews (founder + 1)",
      "Business Growth OS report",
      "Prioritized first-action map",
      "30-day follow-up review",
    ],
  },
  {
    no: "02",
    name: "Growth",
    nameItalic: "sprint",
    tagline: "Diagnosis plus guided execution. Sharper positioning, fixed gaps, real momentum.",
    fit: "Growing businesses with traction",
    weeks: "~ 3 months",
    price: "$18k",
    items: [
      "Deep external + internal review",
      "Up to 5 stakeholder interviews",
      "Implementation roadmap",
      "Bi-weekly strategy sessions",
      "Guided execution sprint",
      "90-day follow-up review",
    ],
    featured: true,
    badge: "Most chosen",
  },
  {
    no: "03",
    name: "Growth",
    nameItalic: "partner",
    tagline: "Long-term strategic partnership. Repeated review, risk monitoring, and execution support.",
    fit: "Established (20–50 employees)",
    weeks: "6 – 12 months",
    price: "$12k/mo",
    items: [
      "Quarterly Growth OS reports",
      "Full team interviews",
      "Live risk & opportunity register",
      "Weekly strategy sessions",
      "Continuous implementation support",
      "Direct Slack + on-call access",
    ],
  },
];

function TierCard({ no, name, nameItalic, tagline, fit, weeks, price, items, featured, badge }) {
  return (
    <div className={`tier-card ${featured ? "featured" : ""}`}>
      {badge && <div className="badge">{badge}</div>}
      <div className="tier-no">
        <span>TIER {no}</span>
        <span>{weeks}</span>
      </div>
      <div className="tier-name">{name} <em>{nameItalic}</em></div>
      <div className="tier-tagline">{tagline}</div>
      <div className="tier-meta">
        <div>
          <span className="lbl">Best for</span>
          <span className="val tier-fit">{fit}</span>
        </div>
        <div>
          <span className="lbl">Timeline</span>
          <span className="val">{weeks}</span>
        </div>
      </div>
      <ul>
        {items.map((it, i) => <li key={i}>{it}</li>)}
      </ul>
      <div className="tier-foot">
        <div className="tier-price">
          <span className="from">Starting at</span>
          <span className="amt">{price}</span>
          <span className="unit">USD</span>
        </div>
        <a className="tier-cta" href="contact.html">
          <span>Book a consultation</span>
          <span className="arrow">→</span>
        </a>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="site">
      <div className="wrap">
        <div className="grid">
          <div>
            <div className="lockup"><img src="assets/logo-strip.png" height="36" alt="GrowthOS" /></div>
            <div className="lockup-sub">External performance + internal execution review for growing businesses.</div>
            <a className="btn btn-primary" href="contact.html">
              Book a Consultation <span className="arrow">→</span>
            </a>
          </div>
          <div className="col">
            <h5>Pages</h5>
            <a href="index.html">Home</a>
            <a href="who.html">Who This Is For</a>
            <a href="pricing.html">Pricing</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
          </div>
          <div className="col">
            <h5>Tiers</h5>
            <a href="pricing.html">Tier 1 · Diagnostic</a>
            <a href="pricing.html">Tier 2 · Growth Sprint</a>
            <a href="pricing.html">Tier 3 · Growth Partner</a>
          </div>
          <div className="col">
            <h5>Get started</h5>
            <a href={window.ASSESSMENT_URL || "#"} target="_blank" rel="noopener">Self-Assessment ↗</a>
            <a href="contact.html">Book a call</a>
            <a href="mailto:info@growthos.business">info@growthos.business</a>
          </div>
        </div>
        <div className="bottom">
          <span>© 2026 BUSINESS GROWTH OS · ALL RIGHTS RESERVED</span>
          <div>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, PageHead, CTAStrip, PillarDiagram, Footer, TierCard, TIERS });