// ============================================================
// DEMIURGE — PRICING (4-tier, Growth dominant) + CASE STUDIES
// FINAL CTA + FOOTER
// ============================================================

const TIERS = [
  {
    key: 'starter',
    name: 'Starter',
    tag: 'For solo operators & founders',
    setup: '£2,000 setup',
    price: '£500',
    per: '/ month',
    blurb: 'A single operator deployed and tuned. Start with the work that hurts most.',
    feats: [
      ['1 operator', 'pick from Atlas, Vesta, or Iris'],
      ['Up to 1,000 conversations / mo', null],
      ['Email + chat channels', null],
      ['Demiurge CRM included', null],
      ['Standard integrations', '40+ tools'],
      ['Community support', null]
    ],
    excluded: ['AI phone agent (Hermes)', 'Multi-operator orchestration'],
    cta: 'Deploy Now',
    featured: false,
    badge: null,
    occ: '12 of 40 seats · open'
  },
  {
    key: 'growth',
    name: 'Growth',
    tag: 'Most chosen · the dominant configuration',
    setup: '£4,000 setup',
    price: '£850',
    per: '/ month',
    blurb: 'Four operators in concert. The point at which the OS pays for itself within the first quarter.',
    feats: [
      ['4 operators', 'Atlas + Hermes + Vesta + Iris'],
      ['Unlimited conversations', null],
      ['Email, chat, SMS, voice', null],
      ['AI phone agent included', 'Hermes · 14k calls/mo'],
      ['Demiurge CRM + pipeline', null],
      ['Industry stack pre-tuned', null],
      ['Priority deployment · 7 days', null],
      ['Dedicated deployment lead', null],
      ['Slack + 24/7 monitoring', null]
    ],
    excluded: [],
    cta: 'Deploy Now',
    featured: true,
    badge: 'Most deployed',
    occ: '47 of 200 seats · open'
  },
  {
    key: 'autonomous',
    name: 'Autonomous',
    tag: 'The full workforce',
    setup: '£8,500 setup',
    price: '£1,500',
    per: '/ month',
    blurb: 'All six operators, end-to-end. Your business runs as an autonomous loop. You hold the wheel.',
    feats: [
      ['All 6 operators live', 'Atlas · Hermes · Calliope · Vesta · Orion · Iris'],
      ['Unlimited everything', null],
      ['All channels · all languages', null],
      ['AI phone agent · unlimited minutes', null],
      ['Custom orchestration playbooks', null],
      ['Industry stack pre-tuned', null],
      ['Dedicated operations engineer', null],
      ['Quarterly business review', null],
      ['SLA · 99.97% with credits', null]
    ],
    excluded: [],
    cta: 'Deploy Now',
    featured: false,
    badge: null,
    occ: '6 of 40 seats · open'
  },
  {
    key: 'enterprise',
    name: 'Enterprise',
    tag: 'Multi-location · multi-brand · regulated',
    setup: 'From £20,000 setup',
    price: 'From £3,000',
    per: '/ month',
    blurb: 'Custom operators. Private deployment. Regulated industries. Onboarded by our principals.',
    feats: [
      ['Custom operator development', null],
      ['Private cloud or on-prem', null],
      ['SAML · SCIM · audit logs', null],
      ['SOC-2 II · HIPAA · ISO 27001', null],
      ['White-label & multi-tenant', null],
      ['Dedicated success principal', null],
      ['Quarterly architecture review', null],
      ['Custom SLA · uptime credits', null]
    ],
    excluded: [],
    cta: 'Book Strategy Call',
    featured: false,
    badge: null,
    occ: 'By invitation'
  }
];

const PricingSection = () => (
  <section className="lp-section" id="pricing">
    <div className="lp">
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 48, flexWrap: 'wrap', maxWidth: 1100}}>
        <div style={{maxWidth: 720}}>
          <div className="lp-eyebrow">/ 10 · Operator tiers</div>
          <h2 className="lp-h2" style={{marginTop: 18}}>
            Choose your <em className="lp-brass">configuration</em>.<br/>
            Deploy in seven days.
          </h2>
        </div>
        <p className="lp-lede" style={{maxWidth: 380, fontSize: 15.5}}>
          Every tier includes setup, tuning, integration, and the CRM. The OS is fully managed.
          Cancel inside the first 30 days for any reason.
        </p>
      </div>

      <div className="lp-pricing-grid lp-pricing-grid-4">
        {TIERS.map(t => (
          <div className={`lp-price-card ${t.featured ? 'featured' : ''}`} key={t.key}>
            {t.badge ? <div className="lp-price-badge">{t.badge}</div> : null}
            <div>
              <div className="lp-price-name">{t.name}</div>
              <div className="lp-price-tag">{t.tag}</div>
            </div>
            <div className="lp-price-blurb">{t.blurb}</div>
            <div>
              <div className="lp-price-setup">{t.setup}</div>
              <div className="lp-price-amount">
                {t.price.startsWith('£') ? <span className="cur">£</span> : null}
                {t.price.replace('£', '')}
                {t.per ? <span className="per">{t.per}</span> : null}
              </div>
            </div>
            <div className="lp-price-feat">
              {t.feats.map(([f, sub], i) => (
                <div className="ln" key={i}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12l5 5L20 7"/></svg>
                  <span style={{flex: 1}}>
                    <div>{f}</div>
                    {sub ? <div style={{fontFamily: 'Geist Mono', fontSize: 10.5, color: 'var(--text-faint)', letterSpacing: 0.4, marginTop: 2, textTransform: 'uppercase'}}>{sub}</div> : null}
                  </span>
                </div>
              ))}
              {t.excluded.map((f, i) => (
                <div className="ln mute" key={`x-${i}`}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
                  <span>{f}</span>
                </div>
              ))}
            </div>
            <div style={{display: 'flex', flexDirection: 'column', gap: 8, width: '100%'}}>
              {t.key !== 'enterprise' && (
                <a href={`/signup?tier=${t.key}`} className={`lp-btn ${t.featured ? 'primary' : ''}`} style={{justifyContent: 'center', width: '100%'}}>
                  Purchase {t.name}
                  <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
              )}
              <a
                href={`/contact?package=${t.key}&intent=strategy-call&source=pricing`}
                className={`lp-btn ${t.key === 'enterprise' ? 'primary' : ''}`}
                style={{justifyContent: 'center', width: '100%'}}
              >
                Book a strategy call
                <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              </a>
            </div>
            <div className="lp-price-meta">
              <span className={`occ ${t.featured ? 'warn' : ''}`}>{t.occ}</span>
              <span>Cohort 014 · Q2 26</span>
            </div>
          </div>
        ))}
      </div>

      <div className="lp-pricing-note">
        <span className="dot"></span>
        <span>Every plan includes a 30-day cancellation window, white-glove deployment, SOC-2 II infrastructure, and the Demiurge Console with unlimited seats.</span>
      </div>
    </div>
  </section>
);

// ============================================================
// CASE STUDIES / TESTIMONIALS — oversized metrics
// ============================================================

const CaseStudySection = () => {
  const cases = [
    {
      industry: 'DENTAL · 7 LOCATIONS',
      quote: 'We replaced the front desk evening shift. Bookings up. Cost per booking down. The team finally goes home on time.',
      who: 'Dr. Anya Patel',
      role: 'Owner · Belmont Dental Group',
      avatar: 'AP',
      metrics: [['Booked meetings', '+312%'], ['Chair utilisation', '92%']]
    },
    {
      industry: 'PROPERTY · NORTH LONDON',
      quote: 'Atlas works the cold list 18 hours a day. We doubled the pipeline in 90 days with the same closer team.',
      who: 'Marcus Whitfield',
      role: 'Managing Director · Westwood & Co.',
      avatar: 'MW',
      metrics: [['Pipeline generated', '£420k'], ['CPA reduction', '-78%']]
    },
    {
      industry: 'AGENCY · 40-ACCOUNT BOOK',
      quote: 'I run forty client accounts with the staffing of a boutique. Demiurge is now the senior strategist sitting behind every junior.',
      who: 'Priya Iyer',
      role: 'Founder · Iyer & Atlas Studio',
      avatar: 'PI',
      metrics: [['Margin lift', '+34pp'], ['Accounts / strategist', '12x']]
    }
  ];
  return (
    <section className="lp-section" id="proof">
      <div className="lp">
        <div style={{maxWidth: 820}}>
          <div className="lp-eyebrow">/ 09 · Operator results</div>
          <h2 className="lp-h2" style={{marginTop: 18}}>
            The operators are<br/>
            already <em className="lp-brass">at work</em>.
          </h2>
        </div>
        <div className="lp-tst-grid">
          {cases.map((c, i) => (
            <div className="lp-tst-card" key={i}>
              <div className="lp-tst-ind">{c.industry}</div>
              <div className="lp-tst-quote">"{c.quote}"</div>
              <div className="lp-tst-numbers">
                <div>
                  <div className="lbl">{c.metrics[0][0]}</div>
                  <div className="v">{c.metrics[0][1]}</div>
                </div>
                <div>
                  <div className="lbl">{c.metrics[1][0]}</div>
                  <div className="v">{c.metrics[1][1]}</div>
                </div>
              </div>
              <div className="lp-tst-attr">
                <div className="lp-tst-avatar">{c.avatar}</div>
                <div className="who">
                  <span className="name">{c.who}</span>
                  <span className="pos">{c.role}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// FINAL CTA — cinematic, emotional close
// ============================================================

const Countdown = () => {
  // Static countdown to "end of intake" — set to ~12 days from now
  const [time, setTime] = React.useState(() => ({ d: 11, h: 14, m: 32, s: 18 }));
  React.useEffect(() => {
    const t = setInterval(() => {
      setTime(c => {
        let { d, h, m, s } = c;
        s--;
        if (s < 0) { s = 59; m--; }
        if (m < 0) { m = 59; h--; }
        if (h < 0) { h = 23; d--; }
        if (d < 0) { d = 11; h = 14; m = 32; s = 18; }
        return { d, h, m, s };
      });
    }, 1000);
    return () => clearInterval(t);
  }, []);
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="lp-countdown">
      <div className="cd-item"><div className="cd-val">{pad(time.d)}</div><div className="cd-lbl">Days</div></div>
      <div className="cd-sep">:</div>
      <div className="cd-item"><div className="cd-val">{pad(time.h)}</div><div className="cd-lbl">Hours</div></div>
      <div className="cd-sep">:</div>
      <div className="cd-item"><div className="cd-val">{pad(time.m)}</div><div className="cd-lbl">Min</div></div>
      <div className="cd-sep">:</div>
      <div className="cd-item"><div className="cd-val">{pad(time.s)}</div><div className="cd-lbl">Sec</div></div>
    </div>
  );
};

// Awakening — subtle orbital wake animation for the final CTA bg
const FinalAwakening = () => (
  <div className="lp-final-bg">
    <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="awake" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#e8c98a" stopOpacity="0.4"/>
          <stop offset="40%" stopColor="#8b6bff" stopOpacity="0.2"/>
          <stop offset="100%" stopColor="transparent"/>
        </radialGradient>
        <linearGradient id="awake-ring" x1="0%" x2="100%">
          <stop offset="0%" stopColor="#8a6a2e"/>
          <stop offset="50%" stopColor="#e8c98a"/>
          <stop offset="100%" stopColor="#8a6a2e"/>
        </linearGradient>
      </defs>
      <circle cx="600" cy="300" r="400" fill="url(#awake)" opacity="0.7"/>
      {/* Six operator nodes awakening in a ring */}
      {[0, 1, 2, 3, 4, 5].map(i => {
        const angle = (i / 6) * Math.PI * 2 - Math.PI / 2;
        const r = 220;
        const cx = 600 + Math.cos(angle) * r;
        const cy = 300 + Math.sin(angle) * r;
        return (
          <g key={i}>
            <circle cx={cx} cy={cy} r="48" fill="none" stroke="url(#awake-ring)" strokeWidth="0.8" opacity="0.4">
              <animate attributeName="r" values="40;58;40" dur={`${6 + i * 0.3}s`} repeatCount="indefinite" begin={`-${i * 0.6}s`}/>
              <animate attributeName="opacity" values="0.2;0.6;0.2" dur={`${6 + i * 0.3}s`} repeatCount="indefinite" begin={`-${i * 0.6}s`}/>
            </circle>
            <circle cx={cx} cy={cy} r="4" fill="#e8c98a" opacity="0.9">
              <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" repeatCount="indefinite" begin={`-${i * 0.3}s`}/>
            </circle>
            <line x1="600" y1="300" x2={cx} y2={cy} stroke="#c9a674" strokeWidth="0.5" opacity="0.25" strokeDasharray="2 6"/>
          </g>
        );
      })}
      {/* Central core */}
      <circle cx="600" cy="300" r="32" fill="url(#awake)"/>
      <circle cx="600" cy="300" r="14" fill="#e8c98a" opacity="0.85"/>
      <circle cx="600" cy="300" r="14" fill="none" stroke="#fff" strokeWidth="0.5" opacity="0.7"/>
    </svg>
  </div>
);

const FinalCTA = () => (
  <section className="lp-final" id="deploy">
    <FinalAwakening/>
    <div className="lp">
      <div className="lp-final-inner">
        <div className="lp-eyebrow" style={{justifyContent: 'center'}}>/ 11 · Intake closes</div>
        <h2 className="lp-final-h">
          The companies winning tomorrow<br/>
          <em className="lp-brass">deploy operators today</em>.
        </h2>
        <p className="lp-final-sub">
          Build your autonomous workforce before your competitors do.
          Cohort 014 closes in:
        </p>
        <Countdown/>
        <div className="lp-hero-cta-row" style={{justifyContent: 'center'}}>
          <a href="#pricing" className="lp-btn primary lg">
            Deploy your operators
            <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <a href="#contact" className="lp-btn lg">
            Book strategy session
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
          </a>
        </div>
        <div className="lp-final-fineprint">
          <span>30-day cancel</span>
          <span className="sep">·</span>
          <span>SOC-2 II</span>
          <span className="sep">·</span>
          <span>HIPAA · ISO 27001</span>
          <span className="sep">·</span>
          <span>UK · EU · US data residency</span>
        </div>
      </div>
    </div>
  </section>
);

// ============================================================
// FOOTER
// ============================================================

const FooterMark = () => (
  <svg viewBox="0 0 32 32" width="32" height="32">
    <defs>
      <radialGradient id="ftr-mark" cx="35%" cy="35%">
        <stop offset="0%" stopColor="#fff"/>
        <stop offset="50%" stopColor="#8b6bff"/>
        <stop offset="100%" stopColor="#1e1455"/>
      </radialGradient>
    </defs>
    <circle cx="16" cy="16" r="11" fill="url(#ftr-mark)"/>
    <ellipse cx="16" cy="16" rx="14" ry="4" fill="none" stroke="#4be8ff" strokeWidth="0.8" transform="rotate(-22 16 16)"/>
  </svg>
);

const Footer = () => (
  <footer className="lp-foot">
    <div className="lp">
      <div className="lp-foot-grid">
        <div className="lp-foot-brand">
          <div className="name">
            <FooterMark/>
            <span>Demiurge</span>
            <span className="sys">/ SYSTEMS · v.II</span>
          </div>
          <p className="desc">
            The autonomous operating system for ambitious operators. Deployed in seven days.
            Cancel inside the first thirty.
          </p>
          <div style={{marginTop: 20, display: 'flex', gap: 12, alignItems: 'center'}}>
            <span style={{fontFamily: 'Geist Mono', fontSize: 9.5, color: '#5dffb0', letterSpacing: '0.18em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6}}>
              <span style={{width: 6, height: 6, borderRadius: '50%', background: '#5dffb0', boxShadow: '0 0 6px #5dffb0', animation: 'pulse 1.6s infinite'}}></span>
              All systems nominal
            </span>
          </div>
        </div>
        <div className="lp-foot-col">
          <h4>System</h4>
          <a href="#team">Operators</a>
          <a href="#live">Command Center</a>
          <a href="#workflows">Workflows</a>
          <a href="#industries">Industry Stacks</a>
          <a href="#proof">Case Studies</a>
        </div>
        <div className="lp-foot-col">
          <h4>Deploy</h4>
          <a href="#pricing">Pricing</a>
          <a href="#contact">Strategy Call</a>
          <a href="#deploy">Cohort Intake</a>
          <a href="Demiurge Console.html" target="_blank" rel="noopener">Live Console</a>
        </div>
        <div className="lp-foot-col">
          <h4>Company</h4>
          <a href="/manifesto">Manifesto</a>
          <a href="/research">Research</a>
          <a href="/operators">Operators wanted</a>
          <a href="/press">Press</a>
        </div>
        <div className="lp-foot-col">
          <h4>Legal</h4>
          <a href="/legal">Legal</a>
          <a href="/legal/privacy">Privacy</a>
          <a href="/legal/dpa-gdpr">DPA · GDPR</a>
          <a href="/legal/security">Security · SOC 2</a>
          <a href="/legal/terms">Terms</a>
        </div>
      </div>
      <div className="lp-foot-base">
        <div className="l">
          <span>© 2026 Demiurge Systems Ltd</span>
          <span style={{color: 'rgba(255,255,255,0.1)'}}>·</span>
          <span>Registered in England · 17109558</span>
        </div>
        <div>
          <span>"Mox Operari · Nunc Imperare"</span>
        </div>
      </div>
    </div>
  </footer>
);

window.PricingSection = PricingSection;
window.CaseStudySection = CaseStudySection;
window.FinalCTA = FinalCTA;
window.Footer = Footer;