// Sections.jsx — Problem cards, SCALE model, Before/After, Ideal-fit, CTA banner, Footer

const PROBLEM_CARDS = [
  { icon: '🔥', title: 'From firefighting to control', body: "Late fulfilment, poor inventory visibility, supplier issues, unclear ownership, and margin leakage — all symptoms of an ops function that hasn't scaled with the business." },
  { icon: '🏭', title: 'Enterprise-grade execution', body: 'Experience built in complex international environments where execution discipline, structured problem solving, and KPI cadence are non-negotiable.' },
  { icon: '⚙️', title: 'Practical scaling systems', body: 'Not theory. Operating routines, dashboards, SOPs, supplier rhythms, inventory planning, and leadership habits that make growth manageable.' },
];

function Problem() {
  return (
    <section className="section">
      <SectionHeader label="The Problem" title="Why growing brands stall"
        sub="Most brands don't fail due to weak products. They break because operations can't keep up with growth." />
      <div className="grid-3">
        {PROBLEM_CARDS.map((c) => (
          <div className="card" key={c.title}>
            <div className="card-icon">{c.icon}</div>
            <h3>{c.title}</h3>
            <p>{c.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

const SCALE_STEPS = [
  ['S', 'Stabilize', 'Create operational visibility. Map the current process, identify bottlenecks, clarify ownership, and stop recurring firefighting before it drains the team.'],
  ['C', 'Control', 'Install KPI dashboards, weekly reviews, fulfilment metrics, inventory controls, and supplier performance routines — so decisions are data-driven.'],
  ['A', 'Accountability', 'Define decision rights, meeting cadence, role clarity, escalation paths, and leadership routines that keep the team aligned and moving.'],
  ['L', 'Leverage', 'Standardize what works through SOPs, automation opportunities, supplier playbooks, and repeatable workflows that reduce founder dependence.'],
  ['E', 'Expand', 'Prepare for scalable growth through margin improvement, fulfilment reliability, team coaching, and 90-day execution roadmaps.'],
];

function ScaleModel() {
  return (
    <section className="section">
      <SectionHeader id="scale-model" label="The Framework" title="The SCALE™ Model"
        sub="A practical operating system for e-commerce brands growing faster than their internal structure." />
      {SCALE_STEPS.map(([letter, title, desc]) => (
        <div className="scale-step" key={letter}>
          <div className="scale-letter">{letter}</div>
          <div className="scale-body">
            <h3>{title}</h3>
            <p>{desc}</p>
          </div>
        </div>
      ))}
    </section>
  );
}

const BEFORE = [
  'Founder involved in every operational issue',
  'Inventory decisions based on gut feeling',
  'Supplier follow-up is reactive and inconsistent',
  'No clear KPI rhythm or review cadence',
  'SOPs are missing or ignored by the team',
  'Team accountability is unclear',
  'Growth creates more complexity, not momentum',
];
const AFTER = [
  'Weekly operating rhythm installed and running',
  'KPI dashboard guiding decisions at every level',
  'Bottlenecks visible, owned, and resolved fast',
  'Inventory and supplier routines systematically improved',
  'SOPs implemented, followed, and continuously refined',
  'Team roles and expectations clearly defined',
  'Growth becomes structured, scalable, and manageable',
];

function BeforeAfter() {
  return (
    <section className="section">
      <SectionHeader label="The Transformation" title="What changes after working together"
        sub="A structured before-and-after view of what operational transformation looks like in practice." />
      <div className="grid-2">
        <div className="ba-col">
          <div className="ba-header before">✗ &nbsp; Before</div>
          {BEFORE.map((t) => (
            <div className="ba-item" key={t}><span className="ba-icon" style={{ color: '#EF4444' }}>✗</span>{t}</div>
          ))}
        </div>
        <div className="ba-col after">
          <div className="ba-header after">✓ &nbsp; After</div>
          {AFTER.map((t) => (
            <div className="ba-item" key={t}><span className="ba-icon" style={{ color: '#22C55E' }}>✓</span>{t}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FIT_ITEMS = [
  '€500k+ in annual revenue.',
  'Growing team without a scalable operating structure.',
  'Increasing pressure on inventory, fulfillment, suppliers, and margins.',
  'Founder remains heavily involved in operational decision-making.',
  'Limited process documentation, SOPs, and performance visibility.',
  'Desire to scale sustainably without creating operational chaos.',
];

function IdealFit() {
  return (
    <section className="section">
      <SectionHeader label="Who This Is For" title="Who This Is For"
        sub="Designed for e-commerce founders who have achieved product-market fit and are growing rapidly, b
ut whose operations are struggling to keep pace." />
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 32, alignItems: 'start' }} className="fit-grid">
        <div>
          {FIT_ITEMS.map((t) => (
            <div className="fit-item" key={t}><div className="fit-dot" />{t}</div>
          ))}
        </div>
        <div className="card" style={{ textAlign: 'center', padding: '36px 24px' }}>
          <div style={{ fontSize: 40, marginBottom: 16 }}>🎯</div>
          <p style={{ fontSize: 15, color: 'var(--fg2)', lineHeight: 1.6 }}>
            If this sounds like your brand, the Operational Diagnostic is the fastest way to get clarity and a clear action plan.
          </p>
          <a href="#contact" style={{ display: 'block', marginTop: 20, background: 'var(--green)', color: 'var(--green-on)', fontWeight: 800, padding: '13px 20px', borderRadius: 12, fontSize: 14 }}>
            Start with the Diagnostic
          </a>
        </div>
      </div>
    </section>
  );
}

function CtaBanner() {
  return (
    <section className="cta-banner">
      <p className="section-label">▸ &nbsp; Take Action</p>
      <h2>Ready to build the operating system behind your growth?</h2>
      <p>Start with the Operational Diagnostic — get a clear view of your bottlenecks, KPI gaps, margin leaks, and the 90-day roadmap to scale with control.</p>
      <a className="hero-btn" href="#contact" style={{ marginRight: 0 }}>Book Operational Diagnostic →</a>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      © 2026 anyonecanscale.com · Fractional COO for E-commerce Brands
    </footer>
  );
}

Object.assign(window, { Problem, ScaleModel, BeforeAfter, IdealFit, CtaBanner, Footer });