// Terrain — section components

const Hero = ({ tweaks }) => {
  return (
    <section className="hero">
      <TopoBg />
      <div className="container">
        <div className="hero-content">
          <div className="reveal visible">
            <span className="eyebrow">{tweaks.eyebrow}</span>
          </div>
          <h1 className="reveal visible reveal-delay-1">
            {tweaks.headlineLead}{' '}
            <span className="accent">{tweaks.headlineAccent}</span>{' '}
            {tweaks.headlineTail}
          </h1>
          <p className="hero-sub reveal visible reveal-delay-2">
            {tweaks.subhead}
          </p>
          <div className="hero-cta-row reveal visible reveal-delay-3">
            <a href="https://cal.com/tejas-ag/30min" className="btn btn-primary">
              Book a demo
              <ArrowRight />
            </a>
            <a href="#employees" className="btn btn-ghost">
              Meet the employees
              <ArrowRight />
            </a>
          </div>
          <div className="hero-meta reveal visible reveal-delay-4">
            <span className="hero-meta-item"><span className="dot"></span> Live across 40+ firms</span>
            <span className="hero-meta-item">Deploys in 14 days</span>
            <span className="hero-meta-item">80% less than agencies</span>
          </div>
        </div>
      </div>
    </section>
  );
};

const HeroPreview = () => {
  // animated counter for revenue figure
  const [revenue, setRevenue] = React.useState(0);
  const [intakeCount, setIntakeCount] = React.useState(0);

  React.useEffect(() => {
    const target = 1284000;
    const start = performance.now();
    const dur = 1600;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setRevenue(Math.floor(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  React.useEffect(() => {
    const id = setInterval(() => setIntakeCount(n => n + 1), 2400);
    return () => clearInterval(id);
  }, []);

  const fmtMoney = (n) => '$' + n.toLocaleString('en-US');

  return (
    <div className="preview-card">
      <div className="preview-bar">
        <div className="preview-dots">
          <span className="preview-dot"></span>
          <span className="preview-dot"></span>
          <span className="preview-dot"></span>
        </div>
        <span className="preview-title">terrain.app — operations</span>
        <span style={{ marginLeft: 'auto' }}><span className="tag-active">live</span></span>
      </div>
      <div className="preview-body">
        <div>
          <div className="preview-col-label">
            <span>Revenue · Q2</span>
            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--muted-2)' }}>YTD</span>
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 12 }}>
            {fmtMoney(revenue)}
          </div>
          <div className="preview-line">
            <span className="preview-line-label">New retainers signed</span>
            <span className="preview-line-value up">+ 38</span>
          </div>
          <div className="preview-line">
            <span className="preview-line-label">Avg. case value</span>
            <span className="preview-line-value">$33.7K</span>
          </div>
          <div className="preview-line">
            <span className="preview-line-label">Pipeline conversion</span>
            <span className="preview-line-value up">+ 11.4%</span>
          </div>
          <div className="preview-line">
            <span className="preview-line-label">Intakes this hour</span>
            <span className="preview-line-value">{12 + intakeCount}</span>
          </div>
        </div>
        <div>
          <div className="preview-col-label">
            <span>Employees · on-shift</span>
            <span className="tag-active">2 active</span>
          </div>
          <PreviewEmployeeRow name="June" role="Marketing" task="A/B test · landing page · Estate" />
          <PreviewEmployeeRow name="Mira" role="Growth" task="Qualifying lead · PI · Estate referral" />
          <PreviewEmployeeRow name="June" role="Marketing" task="Generating SEO content · PI practice" />
          <PreviewEmployeeRow name="Mira" role="Growth" task="Follow-up sequence · 23 prospects" />
          <PreviewEmployeeRow name="June" role="Marketing" task="Tracking ad attribution · 14 campaigns" />
        </div>
      </div>
    </div>
  );
};

const PreviewEmployeeRow = ({ name, role, task }) => (
  <div className="preview-line">
    <span className="preview-line-label">
      <span style={{
        width: 22, height: 22, borderRadius: 6,
        background: 'var(--bg-2)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-2)',
      }}>{name[0]}</span>
      <span>
        <span style={{ fontWeight: 500 }}>{name}</span>
        <span style={{ color: 'var(--muted-2)', fontSize: 12, marginLeft: 6, fontFamily: 'var(--font-mono)' }}>· {role}</span>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{task}</div>
      </span>
    </span>
  </div>
);

// EMPLOYEES SECTION ----------------------------------------------------------

const employees = [
  {
    id: 'TR-01',
    name: 'June',
    role: 'Marketing',
    desc: 'Treats every practice area like its own funnel — running campaigns, refining copy, and reporting on what actually drives signed cases.',
    tasks: [
      'Generates and tests practice-area landing pages',
      'Writes case-aligned content & nurture sequences',
      'Tracks attribution from ad to signed retainer',
      'Surfaces the 5 highest-ROI channels weekly',
    ],
  },
  {
    id: 'TR-02',
    name: 'Mira',
    role: 'Growth',
    desc: 'Runs intake, qualifies prospects against your case-fit criteria and books consults — 24/7, in plain English or Spanish.',
    tasks: [
      'Qualifies inbound calls, web chats, and forms',
      'Schedules consultations against partner calendars',
      'Scores referrals by likelihood-to-sign',
      'Hands off warm leads with full case context',
    ],
  },
];

const EmployeesSection = () => (
  <section id="employees" className="section">
    <div className="container">
      <div className="section-header reveal">
        <div className="section-label">
          <span className="section-num">— 01 / EMPLOYEES</span>
          <span className="eyebrow">Two roles. One platform.</span>
        </div>
        <div>
          <h2>An entire commercial team, hired in an afternoon.</h2>
          <p className="lede">
            Terrain employees are purpose-built for mid-market firms — trained on how law firms actually run, integrated with your case management stack, and supervised by your partners.
          </p>
        </div>
      </div>

      <div className="employees-grid">
        {employees.map((e, i) => (
          <div key={e.id} className={`employee-card reveal reveal-delay-${i+1}`}>
            <div className="employee-head">
              <div>
                <div className="employee-name">{e.name}</div>
                <div className="employee-role">{e.role.toUpperCase()} · AI EMPLOYEE</div>
              </div>
              <span className="employee-id">{e.id}</span>
            </div>
            <p className="employee-desc">{e.desc}</p>
            <div className="employee-tasks">
              {e.tasks.map(t => (
                <div key={t} className="employee-task">
                  <span className="task-check"><Check /></span>
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// COMPARISON SECTION ---------------------------------------------------------

const ComparisonSection = () => (
  <section className="section" style={{ background: 'var(--bg-2)' }}>
    <div className="container">
      <div className="section-header reveal">
        <div className="section-label">
          <span className="eyebrow">Stop overpaying for slow results</span>
        </div>
        <div>
          <h2>What you get vs. what agencies promise</h2>
        </div>
      </div>

      <div className="comparison-table reveal">
        <div className="comparison-header">
          <div className="comparison-col"></div>
          <div className="comparison-col comparison-col-left">Traditional Agency</div>
          <div className="comparison-col comparison-col-right">Terrain AI Employee</div>
        </div>
        <div className="comparison-row">
          <div className="comparison-label">Cost</div>
          <div className="comparison-cell comparison-cell-left">$5-10k/month</div>
          <div className="comparison-cell comparison-cell-right">$1-2k/month</div>
        </div>
        <div className="comparison-row">
          <div className="comparison-label">Time to results</div>
          <div className="comparison-cell comparison-cell-left">3-6 month ramp-up</div>
          <div className="comparison-cell comparison-cell-right">14-day deployment</div>
        </div>
        <div className="comparison-row">
          <div className="comparison-label">Availability</div>
          <div className="comparison-cell comparison-cell-left">9-5 availability</div>
          <div className="comparison-cell comparison-cell-right">24/7 operation</div>
        </div>
        <div className="comparison-row">
          <div className="comparison-label">Approach</div>
          <div className="comparison-cell comparison-cell-left">Guesswork + experience</div>
          <div className="comparison-cell comparison-cell-right">Data-driven + tested</div>
        </div>
        <div className="comparison-row">
          <div className="comparison-label">Reporting</div>
          <div className="comparison-cell comparison-cell-left">Monthly reports</div>
          <div className="comparison-cell comparison-cell-right">Real-time dashboard</div>
        </div>
        <div className="comparison-row">
          <div className="comparison-label">Customization</div>
          <div className="comparison-cell comparison-cell-left">Generic legal marketing</div>
          <div className="comparison-cell comparison-cell-right">Trained on your firm</div>
        </div>
      </div>
    </div>
  </section>
);

// HOW IT WORKS ---------------------------------------------------------------

const HowSection = () => {
  const steps = [
    { n: '01', t: 'Audit what converts', d: 'We analyze your last 90 days: which channels drove signed cases, where leads drop off, what your agency is currently doing (and missing).' },
    { n: '02', t: 'Train on your data', d: 'June and Mira learn your practice areas, ideal client profile, and conversion patterns. Not generic legal templates—your actual winning playbook.' },
    { n: '03', t: 'Test and optimize', d: 'For 14 days, employees A/B test landing pages, intake scripts, and follow-up sequences. You approve what works. They kill what doesn\'t.' },
    { n: '04', t: 'Go autonomous', d: 'Once conversion rates prove the system works, employees run 24/7. Optimizing campaigns, qualifying leads, and tracking ROI while you sleep.' },
  ];
  return (
    <section id="how" className="section">
      <div className="container">
        <div className="section-header reveal">
          <div className="section-label">
            <span className="section-num">— 02 / DEPLOYMENT</span>
            <span className="eyebrow">14 days, not 6 months</span>
          </div>
          <div>
            <h2>Onboarded faster than hiring an agency. Deployed in 14 days.</h2>
            <p className="lede">
              Agencies need 3 to 6 months to learn your firm. Terrain trains on your actual case data in 14 days, then improves every week based on what converts.
            </p>
          </div>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <div key={s.n} className={`step reveal reveal-delay-${i+1}`}>
              <div className="step-num">STEP / {s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// PRACTICE AREAS -------------------------------------------------------------

const PracticeIcon = ({ kind }) => {
  if (kind === 'pi') return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M3 9C3 5.7 5.7 3 9 3C12.3 3 15 5.7 15 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M6 9V14M12 9V14M9 6V14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
  if (kind === 'estate') return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M3 7L9 3L15 7V14H3V7Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M7 14V10H11V14" stroke="currentColor" strokeWidth="1.5" />
    </svg>
  );
  if (kind === 'criminal') return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M9 3V15M3 6H15M5 6L4 9L6 9.5L5 6ZM13 6L12 9L14 9.5L13 6Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
  return null;
};

const PracticeSection = () => {
  const items = [
    { kind: 'pi', name: 'Personal Injury', desc: 'High-volume intake, lien tracking, and demand-letter drafting tuned for PI firms.', stat: '47%', label: 'INTAKE-TO-SIGN LIFT' },
    { kind: 'estate', name: 'Estate Law', desc: 'Probate, trust admin, and estate planning workflows that handle the long tail of paperwork.', stat: '12 hr', label: 'PARTNER TIME / WEEK BACK' },
    { kind: 'criminal', name: 'Criminal Defense', desc: 'After-hours intake, court-date follow-up, and retainer collection — without losing the human touch.', stat: '24/7', label: 'INBOUND COVERAGE' },
  ];
  return (
    <section id="practice" className="section">
      <div className="container">
        <div className="section-header reveal">
          <div className="section-label">
            <span className="section-num">— 03 / PRACTICE AREAS</span>
            <span className="eyebrow">Built for how you actually run</span>
          </div>
          <div>
            <h2>Tuned for the practice areas that fill mid-market dockets.</h2>
            <p className="lede">
              We don't sell horizontal AI. Every workflow ships with templates, language, and integrations specific to the practice areas where mid-market firms compete.
            </p>
          </div>
        </div>

        <div className="practice-row">
          {items.map((it, i) => (
            <div key={it.name} className={`practice reveal reveal-delay-${i+1}`}>
              <div className="practice-head">
                <h3>{it.name}</h3>
                <span className="practice-icon"><PracticeIcon kind={it.kind} /></span>
              </div>
              <p>{it.desc}</p>
              <div className="practice-stat">
                <span className="practice-stat-num">{it.stat}</span>
                <span className="practice-stat-label">{it.label}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// SECURITY -------------------------------------------------------------------

const SecuritySection = () => {
  const items = [
    { name: 'SOC 2 TYPE II', desc: 'Audited annually' },
    { name: 'PRIVILEGE-AWARE', desc: 'Matter-scoped access' },
    { name: 'NO TRAINING ON YOUR DATA', desc: 'Customer-isolated models' },
    { name: 'ROLE-BASED ACCESS', desc: 'Partner / associate / staff' },
    { name: 'AUDIT TRAIL', desc: 'Every employee action logged' },
    { name: 'US-HOSTED', desc: 'AWS us-east-1, encrypted at rest' },
  ];

  const Shield = () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M7 1.5L12 3.5V7C12 9.8 10 12 7 12.5C4 12 2 9.8 2 7V3.5L7 1.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
    </svg>
  );

  return (
    <section id="security" className="section">
      <div className="container">
        <div className="security reveal">
          <div className="security-inner">
            <div>
              <span className="eyebrow">— 04 / SECURITY &amp; PRIVILEGE</span>
              <h2 style={{ marginTop: 24 }}>
                Built for an industry where one leak ends a career.
              </h2>
              <p className="security-sub">
                Terrain treats attorney-client privilege as a hard constraint, not a configuration. Every employee operates under matter-scoped access, full audit trails, and isolated infrastructure.
              </p>
            </div>
            <div className="security-list">
              {items.map(it => (
                <div key={it.name} className="security-item">
                  <span className="security-badge"><Shield /></span>
                  <span className="security-item-name">{it.name}</span>
                  <span className="security-item-desc">{it.desc}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// FOOTER CTA -----------------------------------------------------------------

const FooterCTA = () => (
  <section id="book" className="footer-cta">
    <div className="container">
      <div className="footer-cta-inner">
        <div className="reveal"><span className="eyebrow">Book a demo</span></div>
        <h2 className="reveal reveal-delay-1">
          See June and Mira run <span className="accent">your marketing</span> for a week.
        </h2>
        <p className="footer-cta-sub reveal reveal-delay-2">
          We'll show you exactly what June and Mira would do with your last 90 days of marketing data—and how much you'd save vs. your current agency.
        </p>
        <div className="footer-cta-row reveal reveal-delay-3">
          <a href="#" className="btn btn-primary">
            Book a demo
            <ArrowRight />
          </a>
          <a href="#" className="btn btn-ghost">
            Read the brief
            <ArrowRight />
          </a>
        </div>
      </div>
    </div>
    <div className="container">
      <div className="footer">
        <div className="footer-inner">
          <Logo />
          <span className="footer-meta">© 2026 TERRAIN LABS, INC. · MADE FOR FIRMS, NOT FOUNDERS.</span>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  Hero, EmployeesSection, ComparisonSection, HowSection, PracticeSection, SecuritySection, FooterCTA,
});