// EpochCore — Epoch-in-a-Box onboarding screens · 4-screen Tesla/Domino's flow
// Value first · personalize · preview · pay
// Single industry pass: dental. All accents: EpochCore purple #6a3df0.

const BRAND = {
  purple: '#6a3df0',
  purpleDeep: '#5a2fe0',
  purpleSoft: 'rgba(106,61,240,0.08)',
  purpleLine: 'rgba(106,61,240,0.22)',
  green: '#1f9d61',
  greenSoft: 'rgba(31,157,97,0.10)',
  ink: '#1b1712',
  inkMute: '#8a8174',
  hair: 'rgba(34,27,18,0.12)',
  paper: '#faf8f2',
  paperDeep: '#efe9db',
};

const PLEX_MONO  = '"JetBrains Mono", ui-monospace, monospace';
const PLEX_SERIF = '"Newsreader", Georgia, serif';

// ── Atoms ─────────────────────────────────────────────────────
function MonoLabel({ children, color = BRAND.inkMute, size = 10, style = {} }) {
  return (
    <span style={{
      fontFamily: PLEX_MONO, fontSize: size, fontWeight: 500,
      letterSpacing: 0.6, textTransform: 'uppercase', color, ...style,
    }}>{children}</span>
  );
}

function Logo({ size = 26, color = '#fff', withWord = true }) {
  const mark = (
    <svg width={size} height={size} viewBox="0 0 30 30" fill="none">
      <rect x="6" y="6" width="18" height="18" rx="3"
        transform="rotate(45 15 15)" stroke={color} strokeWidth="2"/>
      <rect x="10.5" y="10.5" width="9" height="9" rx="1.5"
        transform="rotate(45 15 15)" fill={color} opacity="0.5"/>
    </svg>
  );
  if (!withWord) return mark;
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:8 }}>
      {mark}
      <span style={{ fontFamily:PLEX_SERIF, fontWeight:700, fontSize:size*0.62, color, letterSpacing:-0.3 }}>
        EpochCore
      </span>
    </div>
  );
}

function PrimaryButton({ children, disabled=false, style={} }) {
  return (
    <div style={{
      height:54, borderRadius:16, width:'100%',
      background: disabled ? '#D8DBE6' : BRAND.purple,
      color: disabled ? '#9097AE' : '#fff',
      display:'flex', alignItems:'center', justifyContent:'center',
      fontFamily:PLEX_SERIF, fontSize:17, fontWeight:600, letterSpacing:-0.2,
      boxShadow: disabled ? 'none' : `0 8px 28px -10px ${BRAND.purple}99`,
      ...style,
    }}>{children}</div>
  );
}

function StepDots({ step, total=4 }) {
  return (
    <div style={{ display:'flex', gap:6, alignItems:'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          height:4, borderRadius:99,
          width: i === step ? 22 : 6,
          background: i <= step ? BRAND.purple : 'rgba(10,16,36,0.12)',
          transition:'all .2s',
        }}/>
      ))}
    </div>
  );
}

function NavBar({ step, back=true }) {
  return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'62px 24px 0', height:98, boxSizing:'border-box' }}>
      {back
        ? <div style={{ width:36, height:36, borderRadius:12, background:'#fff',
            border:`1px solid ${BRAND.hair}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <svg width="8" height="14" viewBox="0 0 8 14">
              <path d="M7 1L1 7l6 6" stroke={BRAND.ink} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        : <div style={{ width:36 }}/>
      }
      <StepDots step={step}/>
      <div style={{ fontFamily:PLEX_SERIF, fontSize:14, fontWeight:500, color:BRAND.inkMute, width:36, textAlign:'right' }}>Skip</div>
    </div>
  );
}

// ── Chat bubble ───────────────────────────────────────────────
function Bubble({ from, children }) {
  const isAgent = from === 'agent';
  return (
    <div style={{
      display:'flex', justifyContent: isAgent ? 'flex-start' : 'flex-end',
      marginBottom:8,
    }}>
      <div style={{
        maxWidth:'78%', padding:'10px 14px', borderRadius: isAgent ? '16px 16px 16px 4px' : '16px 16px 4px 16px',
        background: isAgent ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.9)',
        color: isAgent ? '#fff' : BRAND.ink,
        fontFamily:PLEX_SERIF, fontSize:13.5, lineHeight:'20px',
        boxShadow: isAgent ? 'none' : '0 2px 8px rgba(0,0,0,0.08)',
      }}>{children}</div>
    </div>
  );
}

// ── ① DEMO — value + price on screen 1 (Tesla/Domino's) ───────
function ScreenDemo({ industry }) {
  return (
    <div style={{ height:'100%', background: BRAND.purple, display:'flex', flexDirection:'column', boxSizing:'border-box', overflow:'hidden' }}>
      {/* Decorative grid */}
      <div style={{ position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px)', backgroundSize:'40px 40px', pointerEvents:'none' }}/>

      {/* Top brand bar */}
      <div style={{ padding:'68px 24px 0', position:'relative', zIndex:2 }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <Logo size={24} color="#fff"/>
          <div style={{ background:'rgba(255,255,255,0.15)', border:'1px solid rgba(255,255,255,0.24)', borderRadius:99, padding:'4px 10px' }}>
            <MonoLabel color="#fff" size={9} style={{ letterSpacing:1.2 }}>2-WEEK FREE TRIAL</MonoLabel>
          </div>
        </div>

        {/* Headline */}
        <div style={{ marginTop:18, fontFamily:PLEX_SERIF, fontSize:34, fontWeight:700, color:'#fff', lineHeight:'38px', letterSpacing:-1.2 }}>
          Your 24/7 front desk,<br/>
          <span style={{ fontStyle:'italic', fontWeight:400 }}>already answering.</span>
        </div>
        <div style={{ marginTop:8, fontSize:13.5, color:'rgba(255,255,255,0.75)', lineHeight:'19px' }}>
          Trained on your business. Live in 72 hours. Answers calls, books appointments, never misses a lead.
        </div>
      </div>

      {/* Live demo chat — this IS the product */}
      <div style={{ margin:'16px 24px 0', background:'rgba(255,255,255,0.10)', borderRadius:18, padding:'14px 14px 10px', position:'relative', zIndex:2, flex:1, overflow:'hidden' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:12 }}>
          <div style={{ width:8, height:8, borderRadius:'50%', background:'#2dd881', boxShadow:'0 0 0 3px rgba(45,216,129,0.3)' }}/>
          <MonoLabel color="rgba(255,255,255,0.7)" size={9} style={{ letterSpacing:1 }}>LAKE NORMAN DENTAL · AGENT LIVE</MonoLabel>
        </div>
        <Bubble from="customer">Are you open on Saturdays?</Bubble>
        <Bubble from="agent">Yes! We're open Sat 9am–2pm. Want me to check availability for you?</Bubble>
        <Bubble from="customer">How much is a cleaning?</Bubble>
        <Bubble from="agent">Routine cleanings run $99–$149. We accept Delta Dental, Cigna, and BCBS. New patients always welcome.</Bubble>
        <Bubble from="customer">I have a toothache, can I be seen today?</Bubble>
        <Bubble from="agent">That sounds urgent — let me get Sandra on the line right now. Can I get your name?</Bubble>
      </div>

      {/* Price + CTA — visible on screen 1 */}
      <div style={{ padding:'12px 24px 32px', background:'linear-gradient(180deg,transparent,rgba(0,0,0,0.15))', position:'relative', zIndex:2 }}>
        <div style={{ display:'flex', justifyContent:'center', gap:16, marginBottom:12 }}>
          {['2 weeks free', '$99 install', '$249/mo after'].map(t => (
            <div key={t} style={{ fontFamily:PLEX_MONO, fontSize:9.5, color:'rgba(255,255,255,0.8)', letterSpacing:0.4, textTransform:'uppercase' }}>{t}</div>
          ))}
        </div>
        <PrimaryButton style={{ background:'#fff', color:BRAND.purple, boxShadow:'0 8px 28px -8px rgba(0,0,0,0.25)' }}>
          Get mine in 60 seconds →
        </PrimaryButton>
        <div style={{ textAlign:'center', marginTop:8, fontFamily:PLEX_MONO, fontSize:10, color:'rgba(255,255,255,0.6)', letterSpacing:0.3 }}>No card. No commitment. Cancel anytime.</div>
      </div>
    </div>
  );
}

// ── ② NAME IT — one field, 30 seconds (Tesla: pick your color) ─
const BIZ_TYPES = ['Dental','HVAC','Law','Medical','Auto','Salon','Restaurant','Other'];

function ScreenNameIt({ industry }) {
  const [bizType, setBizType] = React.useState('Dental');
  return (
    <div style={{ height:'100%', background:BRAND.paper, display:'flex', flexDirection:'column' }}>
      <NavBar step={1}/>
      <div style={{ flex:1, padding:'8px 24px 0', overflow:'hidden' }}>
        <MonoLabel color={BRAND.purple} style={{ display:'block', marginBottom:12 }}>§ 02 · NAME IT · 30 SECONDS</MonoLabel>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:32, fontWeight:700, lineHeight:'36px', color:BRAND.ink, letterSpacing:-1.1, marginBottom:6 }}>
          What's your<br/><span style={{ fontStyle:'italic', fontWeight:400, color:BRAND.purple }}>business?</span>
        </div>
        <div style={{ fontSize:14, color:BRAND.inkMute, lineHeight:'20px', marginBottom:20 }}>
          We train your agent on this. Takes 10 seconds.
        </div>

        {/* Business name */}
        <div style={{ borderRadius:14, padding:'14px 16px', background:'#fff',
          border:`1.5px solid ${BRAND.purple}`, boxShadow:`0 0 0 4px ${BRAND.purpleSoft}`, marginBottom:12 }}>
          <div style={{ fontFamily:PLEX_MONO, fontSize:10, fontWeight:600, color:BRAND.inkMute, letterSpacing:0.4, textTransform:'uppercase', marginBottom:4 }}>Business name</div>
          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
            <span style={{ fontFamily:PLEX_SERIF, fontSize:18, fontWeight:500, color:BRAND.ink, letterSpacing:-0.3 }}>Lake Norman Dental</span>
            <div style={{ width:2, height:22, background:BRAND.purple, animation:'blink 1.1s steps(2) infinite' }}/>
          </div>
        </div>

        {/* Website (optional) */}
        <div style={{ borderRadius:14, padding:'14px 16px', background:'#fff',
          border:`1px solid ${BRAND.hair}`, marginBottom:16 }}>
          <div style={{ fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute, letterSpacing:0.4, textTransform:'uppercase', marginBottom:4 }}>Website <span style={{ opacity:0.6 }}>· optional — we'll train from it</span></div>
          <span style={{ fontFamily:PLEX_SERIF, fontSize:17, fontWeight:400, color:BRAND.inkMute, letterSpacing:-0.2 }}>lakeNormanDental.com</span>
        </div>

        {/* Business type chips */}
        <div style={{ fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute, letterSpacing:0.6, textTransform:'uppercase', marginBottom:10 }}>Type</div>
        <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
          {BIZ_TYPES.map(t => {
            const on = bizType === t;
            return (
              <div key={t} onClick={() => setBizType(t)} style={{
                padding:'8px 14px', borderRadius:99,
                background: on ? BRAND.purple : '#fff',
                color: on ? '#fff' : BRAND.inkMute,
                border:`1px solid ${on ? BRAND.purple : BRAND.hair}`,
                fontFamily:PLEX_SERIF, fontSize:14, fontWeight: on ? 600 : 400,
                cursor:'pointer', letterSpacing:-0.1,
              }}>{t}</div>
            );
          })}
        </div>

        <div style={{ marginTop:14, padding:'10px 12px', borderRadius:12, background:BRAND.purpleSoft, border:`1px solid ${BRAND.purpleLine}` }}>
          <div style={{ fontFamily:PLEX_SERIF, fontSize:12.5, color:BRAND.ink, lineHeight:'17px' }}>
            We'll pre-load your agent with <strong>questions {bizType} customers actually ask</strong> — hours, pricing, booking, and your top policies.
          </div>
        </div>
      </div>

      <div style={{ padding:'12px 24px 28px' }}>
        <PrimaryButton>That's my business →</PrimaryButton>
      </div>
    </div>
  );
}

// ── ③ PREVIEW — "It's yours" (Tesla: see your car rendered) ────
const PREVIEW_TOOLS = [
  'Answer calls 24/7',
  'Book appointments',
  'Send appointment reminders',
  'Follow up on missed calls',
  'Answer common questions',
  'Alert you on urgent requests',
];

function ScreenPreview({ industry }) {
  return (
    <div style={{ height:'100%', background:BRAND.paper, display:'flex', flexDirection:'column' }}>
      <NavBar step={2}/>
      <div style={{ flex:1, overflowY:'auto', padding:'8px 22px 0' }}>
        <MonoLabel color={BRAND.purple} style={{ display:'block', marginBottom:12 }}>§ 03 · YOUR AGENT IS READY</MonoLabel>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:30, fontWeight:700, lineHeight:'34px', color:BRAND.ink, letterSpacing:-1 }}>
          Here's your<br/><span style={{ fontStyle:'italic', fontWeight:400, color:BRAND.purple }}>Lake Norman Dental</span> agent.
        </div>
        <div style={{ marginTop:6, fontSize:14, color:BRAND.inkMute, lineHeight:'19px' }}>
          Pre-trained. Pre-configured. Live in 72 hours.
        </div>

        {/* Agent card — the product */}
        <div style={{ marginTop:16, borderRadius:18, overflow:'hidden', border:`1.5px solid ${BRAND.purpleLine}`, boxShadow:`0 12px 32px -12px ${BRAND.purple}40` }}>
          <div style={{ background:BRAND.purple, padding:'14px 18px' }}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
              <div>
                <div style={{ fontFamily:PLEX_SERIF, fontSize:17, fontWeight:700, color:'#fff', letterSpacing:-0.4 }}>Lake Norman Dental</div>
                <MonoLabel color="rgba(255,255,255,0.7)" size={9} style={{ marginTop:2 }}>Dental · Cornelius, NC · Epoch-in-a-Box</MonoLabel>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                <div style={{ width:7, height:7, borderRadius:'50%', background:'#2dd881', boxShadow:'0 0 8px rgba(45,216,129,0.7)' }}/>
                <MonoLabel color="rgba(255,255,255,0.9)" size={9}>CONFIGURED</MonoLabel>
              </div>
            </div>
          </div>
          <div style={{ background:'#fff', padding:'12px 18px' }}>
            <MonoLabel color={BRAND.inkMute} size={9} style={{ display:'block', marginBottom:8 }}>INSTALLED · 6 TOOLS</MonoLabel>
            {PREVIEW_TOOLS.map(t => (
              <div key={t} style={{ display:'flex', alignItems:'center', gap:10, padding:'6px 0', borderBottom:`1px solid ${BRAND.hair}` }}>
                <div style={{ width:18, height:18, borderRadius:6, background:BRAND.purpleSoft, border:`1px solid ${BRAND.purpleLine}`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <svg width="9" height="8" viewBox="0 0 11 9"><path d="M1 4.5L4 7.5L10 1.5" stroke={BRAND.purple} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <span style={{ fontFamily:PLEX_SERIF, fontSize:13, color:BRAND.ink, letterSpacing:-0.1 }}>{t}</span>
              </div>
            ))}
          </div>
          {/* Guardrail pill */}
          <div style={{ background:BRAND.paperDeep, padding:'10px 18px', display:'flex', alignItems:'center', gap:10 }}>
            <div style={{ width:22, height:22, borderRadius:7, background:BRAND.purple, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
              <svg width="11" height="11" viewBox="0 0 14 14"><path d="M7 1l5 3v4c0 3-2.5 5-5 5s-5-2-5-5V4l5-3z" stroke="#fff" strokeWidth="1.5" fill="none"/></svg>
            </div>
            <div style={{ fontSize:12, color:BRAND.ink, lineHeight:'16px' }}>
              <strong>Guardrail active:</strong> Never quotes a price it doesn't know. Escalates to Sandra for insurance.
            </div>
          </div>
        </div>

        <div style={{ marginTop:12, textAlign:'center', fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute, letterSpacing:0.3 }}>
          Agent goes live within 72 hours of your kickoff call.
        </div>
      </div>

      <div style={{ padding:'12px 22px 28px' }}>
        <PrimaryButton>Activate this agent →</PrimaryButton>
      </div>
    </div>
  );
}

// ── ④ PAY — $99 checkout (4 taps, you're done) ─────────────────
function ScreenPay({ industry }) {
  const [plan, setPlan] = React.useState('annual');
  return (
    <div style={{ height:'100%', background:BRAND.paper, display:'flex', flexDirection:'column' }}>
      <NavBar step={3} back={false}/>
      <div style={{ flex:1, overflowY:'auto', padding:'8px 22px 0' }}>
        <MonoLabel color={BRAND.purple} style={{ display:'block', marginBottom:12 }}>§ 04 · START YOUR TRIAL</MonoLabel>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:30, fontWeight:700, lineHeight:'34px', color:BRAND.ink, letterSpacing:-1 }}>
          Free for <span style={{ fontStyle:'italic', color:BRAND.purple, fontWeight:400 }}>2 weeks</span>.<br/>
          $99 only if you keep it.
        </div>
        <div style={{ marginTop:6, fontSize:13.5, color:BRAND.inkMute, lineHeight:'18px' }}>
          No card charged today. The $99 install fee only applies if you choose to stay after your trial.
        </div>

        {/* Mini agent summary */}
        <div style={{ marginTop:14, padding:'10px 14px', borderRadius:12, background:'#fff', border:`1px solid ${BRAND.hair}`, display:'flex', alignItems:'center', gap:12, marginBottom:12 }}>
          <div style={{ width:36, height:36, borderRadius:10, background:BRAND.purple, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
            <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="#fff" strokeWidth="1.5"/><path d="M3 18a7 7 0 0114 0" stroke="#fff" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </div>
          <div>
            <div style={{ fontFamily:PLEX_SERIF, fontSize:14, fontWeight:600, color:BRAND.ink }}>Lake Norman Dental · 6 tools</div>
            <MonoLabel color={BRAND.purple} size={9}>CONFIGURED · READY TO DEPLOY</MonoLabel>
          </div>
        </div>

        {/* Plan picker */}
        <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:14 }}>
          {[
            { id:'monthly', label:'Monthly', price:'$249', unit:'/mo', sub:'Cancel anytime' },
            { id:'annual',  label:'Annual',  price:'$999', unit:'/yr', sub:'Save $1,989 — 67% off', badge:'BEST VALUE' },
          ].map(p => {
            const on = plan === p.id;
            return (
              <div key={p.id} onClick={() => setPlan(p.id)} style={{
                borderRadius:14, padding:'12px 14px', background:'#fff', cursor:'pointer',
                border: on ? `1.5px solid ${BRAND.purple}` : `1px solid ${BRAND.hair}`,
                boxShadow: on ? `0 0 0 4px ${BRAND.purpleSoft}` : 'none',
                display:'flex', alignItems:'center', gap:12,
              }}>
                <div style={{ width:22, height:22, borderRadius:22, border: on ? 'none' : `1.5px solid ${BRAND.hair}`, background: on ? BRAND.purple : 'transparent', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  {on && <svg width="11" height="9" viewBox="0 0 11 9"><path d="M1 4.5L4 7.5L10 1.5" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </div>
                <div style={{ flex:1 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:7 }}>
                    <span style={{ fontFamily:PLEX_SERIF, fontSize:15, fontWeight:600, color:BRAND.ink }}>{p.label}</span>
                    {p.badge && <MonoLabel color={BRAND.purple} size={8} style={{ background:BRAND.purpleSoft, padding:'2px 6px', borderRadius:4, letterSpacing:0.7 }}>{p.badge}</MonoLabel>}
                  </div>
                  <div style={{ fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute, marginTop:2 }}>{p.sub}</div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <span style={{ fontFamily:PLEX_SERIF, fontSize:22, fontWeight:700, color:BRAND.ink, letterSpacing:-0.5 }}>{p.price}</span>
                  <span style={{ fontFamily:PLEX_MONO, fontSize:9.5, color:BRAND.inkMute }}>{p.unit}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Install fee callout */}
        <div style={{ padding:'10px 13px', borderRadius:11, background:BRAND.paperDeep, border:`1px solid ${BRAND.hair}`, display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <MonoLabel color={BRAND.inkMute} size={9}>ONE-TIME INSTALL</MonoLabel>
            <div style={{ fontFamily:PLEX_SERIF, fontSize:14, fontWeight:600, color:BRAND.ink, marginTop:2 }}>$99 · only if you keep it</div>
          </div>
          <MonoLabel color={BRAND.purple} size={9}>NO CHARGE TODAY</MonoLabel>
        </div>
      </div>

      <div style={{ padding:'10px 22px 28px' }}>
        <PrimaryButton>Start 2-week free trial →</PrimaryButton>
        <div style={{ textAlign:'center', marginTop:8, fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute, letterSpacing:0.3 }}>
          No card charged today · Cancel before day 14, pay nothing
        </div>
      </div>
    </div>
  );
}

// ── ⑤ CONFIRMED — receipt + trial clock ────────────────────────
function ScreenConfirmed({ industry }) {
  return (
    <div style={{ height:'100%', background:BRAND.purple, display:'flex', flexDirection:'column', boxSizing:'border-box' }}>
      <div style={{ position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px)', backgroundSize:'40px 40px', pointerEvents:'none' }}/>
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'0 28px', position:'relative', zIndex:2 }}>
        {/* Big check */}
        <div style={{ width:72, height:72, borderRadius:72, background:'rgba(255,255,255,0.15)', border:'2px solid rgba(255,255,255,0.4)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20 }}>
          <svg width="32" height="28" viewBox="0 0 32 28" fill="none">
            <path d="M2 14L12 24L30 4" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:36, fontWeight:700, color:'#fff', letterSpacing:-1.2, textAlign:'center', lineHeight:'40px' }}>
          You're in.<br/><span style={{ fontWeight:400, fontStyle:'italic' }}>Trial started.</span>
        </div>
        <div style={{ marginTop:10, fontFamily:PLEX_MONO, fontSize:11, color:'rgba(255,255,255,0.7)', letterSpacing:1, textAlign:'center' }}>
          JUN 5 – JUN 19 · 14 DAYS FREE
        </div>

        {/* Receipt card */}
        <div style={{ marginTop:24, width:'100%', background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.2)', borderRadius:16, padding:'16px 18px' }}>
          {[
            ['Business', 'Lake Norman Dental'],
            ['Plan', 'Annual · $999/yr after trial'],
            ['Install fee', '$99 · charged Jun 19 if you stay'],
            ['Trial ends', 'June 19, 2026'],
          ].map(([k,v]) => (
            <div key={k} style={{ display:'flex', justifyContent:'space-between', paddingBottom:10, marginBottom:10, borderBottom:'1px solid rgba(255,255,255,0.1)' }}>
              <MonoLabel color="rgba(255,255,255,0.6)" size={9.5}>{k}</MonoLabel>
              <span style={{ fontFamily:PLEX_SERIF, fontSize:13, color:'#fff', fontWeight:500, letterSpacing:-0.1 }}>{v}</span>
            </div>
          ))}
          <div style={{ display:'flex', justifyContent:'space-between' }}>
            <MonoLabel color="rgba(255,255,255,0.6)" size={9.5}>Charged today</MonoLabel>
            <span style={{ fontFamily:PLEX_SERIF, fontSize:16, color:'#fff', fontWeight:700 }}>$0.00</span>
          </div>
        </div>
      </div>

      <div style={{ padding:'0 24px 32px', position:'relative', zIndex:2 }}>
        <PrimaryButton style={{ background:'#fff', color:BRAND.purple, boxShadow:'0 8px 24px -8px rgba(0,0,0,0.3)' }}>
          Book your kickoff call →
        </PrimaryButton>
        <div style={{ textAlign:'center', marginTop:8, fontFamily:PLEX_MONO, fontSize:10, color:'rgba(255,255,255,0.6)', letterSpacing:0.3 }}>
          Agent goes live within 72 hrs of your call
        </div>
      </div>
    </div>
  );
}

// ── ⑥ BOOK KICKOFF — calendar picker ────────────────────────────
function ScreenBookKickoff({ industry }) {
  const days  = ['Mon 9', 'Tue 10', 'Wed 11', 'Thu 12', 'Fri 13'];
  const slots = ['9:00 AM','10:30 AM','11:00 AM','1:00 PM','2:30 PM','4:00 PM'];
  return (
    <div style={{ height:'100%', background:BRAND.paper, display:'flex', flexDirection:'column' }}>
      <NavBar step={1} back/>
      <div style={{ flex:1, overflowY:'auto', padding:'6px 22px 0' }}>
        <MonoLabel color={BRAND.purple} style={{ display:'block', marginBottom:10 }}>§ 06 · BOOK KICKOFF · 30 MIN · FREE</MonoLabel>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:28, fontWeight:700, lineHeight:'32px', color:BRAND.ink, letterSpacing:-1 }}>
          Book your <span style={{ fontStyle:'italic', fontWeight:400, color:BRAND.purple }}>kickoff call.</span>
        </div>
        <div style={{ marginTop:6, fontSize:13.5, color:BRAND.inkMute, lineHeight:'19px' }}>
          30 min with John from EpochCore. Your agent goes live within 72 hours.
        </div>

        {/* Day row */}
        <div style={{ display:'flex', gap:8, marginTop:16, overflowX:'auto' }}>
          {days.map((d,i) => {
            const sel = i===2;
            return (
              <div key={d} style={{ flex:'0 0 auto', padding:'9px 14px', borderRadius:11,
                background: sel ? BRAND.purple : '#fff', color: sel ? '#fff' : BRAND.ink,
                border: sel ? 'none' : `1px solid ${BRAND.hair}`,
                fontFamily:PLEX_SERIF, fontSize:13.5, fontWeight:600, letterSpacing:-0.2,
                boxShadow: sel ? `0 6px 20px -8px ${BRAND.purple}88` : 'none',
              }}>{d}</div>
            );
          })}
        </div>

        {/* Time slots */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:14 }}>
          {slots.map((s,i) => {
            const sel = i===2; const taken = i===1;
            return (
              <div key={s} style={{ padding:'13px 0', textAlign:'center', borderRadius:11,
                background: sel ? BRAND.purple : '#fff',
                color: sel ? '#fff' : (taken ? '#bbb' : BRAND.ink),
                border: sel ? 'none' : `1px solid ${BRAND.hair}`,
                fontFamily:PLEX_SERIF, fontSize:15, fontWeight:600, letterSpacing:-0.2,
                textDecoration: taken ? 'line-through' : 'none',
                boxShadow: sel ? `0 8px 24px -12px ${BRAND.purple}88` : 'none',
              }}>{s}</div>
            );
          })}
        </div>

        <div style={{ marginTop:14, padding:'10px 12px', borderRadius:11, background:BRAND.purpleSoft, border:`1px solid ${BRAND.purpleLine}`, display:'flex', alignItems:'center', gap:10 }}>
          <div style={{ width:24, height:24, borderRadius:7, background:BRAND.purple, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
            <svg width="12" height="12" viewBox="0 0 14 14"><path d="M7 3v4l3 2" stroke="#fff" strokeWidth="2" strokeLinecap="round" fill="none"/><circle cx="7" cy="7" r="6" stroke="#fff" strokeWidth="1.5" fill="none"/></svg>
          </div>
          <div style={{ fontSize:12.5, lineHeight:'17px', color:BRAND.ink }}>
            Agent live within <strong>72 hours</strong> of this call. John sets it all up — you just show up.
          </div>
        </div>
      </div>

      <div style={{ padding:'10px 22px 28px' }}>
        <PrimaryButton>Confirm Wed · 11:00 AM ET →</PrimaryButton>
      </div>
    </div>
  );
}

// ── ⑦ UPLOAD KNOWLEDGE — train the agent ────────────────────────
function ScreenUploadKnowledge({ industry }) {
  const found = ['Business hours', 'Location & address', 'Services listed', 'Insurance accepted'];
  return (
    <div style={{ height:'100%', background:BRAND.paper, display:'flex', flexDirection:'column' }}>
      <NavBar step={2} back/>
      <div style={{ flex:1, overflowY:'auto', padding:'6px 22px 0' }}>
        <MonoLabel color={BRAND.purple} style={{ display:'block', marginBottom:10 }}>§ 07 · TRAIN YOUR AGENT</MonoLabel>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:28, fontWeight:700, lineHeight:'32px', color:BRAND.ink, letterSpacing:-1 }}>
          What does your agent <span style={{ fontStyle:'italic', color:BRAND.purple, fontWeight:400 }}>need to know?</span>
        </div>
        <div style={{ marginTop:6, fontSize:13.5, color:BRAND.inkMute, lineHeight:'19px' }}>We scanned your site. Add anything else before your kickoff call.</div>

        {/* Website scan result */}
        <div style={{ marginTop:14, borderRadius:14, background:'#fff', border:`1.5px solid ${BRAND.purpleLine}`, overflow:'hidden' }}>
          <div style={{ padding:'10px 14px', background:BRAND.purpleSoft, borderBottom:`1px solid ${BRAND.purpleLine}` }}>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <div style={{ width:16, height:16, borderRadius:'50%', background:BRAND.green, display:'flex', alignItems:'center', justifyContent:'center' }}>
                <svg width="8" height="7" viewBox="0 0 11 9"><path d="M1 4.5L4 7.5L10 1.5" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <span style={{ fontFamily:PLEX_MONO, fontSize:10, color:BRAND.purple }}>SCANNED · lakeNormanDental.com</span>
            </div>
          </div>
          {found.map(f => (
            <div key={f} style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 14px', borderBottom:`1px solid ${BRAND.hair}` }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7.5L5 11L13 3" stroke={BRAND.green} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span style={{ fontFamily:PLEX_SERIF, fontSize:13, color:BRAND.ink }}>{f}</span>
            </div>
          ))}
        </div>

        {/* Upload more */}
        <div style={{ marginTop:12, borderRadius:14, border:`1.5px dashed ${BRAND.hair}`, padding:'18px 14px', textAlign:'center', background:'#fff' }}>
          <div style={{ fontFamily:PLEX_SERIF, fontSize:15, fontWeight:600, color:BRAND.ink, marginBottom:4 }}>Add pricing sheet or FAQ doc</div>
          <div style={{ fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute }}>PDF · DOC · TXT · drag and drop</div>
          <div style={{ marginTop:10, display:'inline-block', padding:'8px 18px', border:`1px solid ${BRAND.purpleLine}`, borderRadius:8, fontFamily:PLEX_SERIF, fontSize:13, color:BRAND.purple, fontWeight:600 }}>Browse files</div>
        </div>

        <div style={{ marginTop:10, padding:'9px 12px', borderRadius:11, background:BRAND.paperDeep, border:`1px solid ${BRAND.hair}` }}>
          <div style={{ fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute, letterSpacing:0.3 }}>ALSO AVAILABLE</div>
          <div style={{ marginTop:4, fontFamily:PLEX_SERIF, fontSize:13, color:BRAND.ink }}>Answer 5 quick questions about pricing, policies, and staff — or skip for now and complete on your kickoff call.</div>
        </div>
      </div>

      <div style={{ padding:'10px 22px 28px' }}>
        <PrimaryButton>Looks good — continue →</PrimaryButton>
      </div>
    </div>
  );
}

// ── ⑧ REVIEW ANSWERS — approve before going live ────────────────
const REVIEW_QA = [
  { q:'Are you open on Saturdays?', a:'Yes! We\'re open Saturdays 9am–2pm. Want to book an appointment?' },
  { q:'Do you take Delta Dental?', a:'We accept Delta Dental PPO, Cigna, and BCBS. New patients welcome.' },
  { q:'How much is a cleaning?', a:'Routine cleanings run $99–$149. We\'d love to get you scheduled!' },
  { q:'I have a toothache — can I come in today?', a:'That sounds urgent. Let me get Sandra on the line right away — can I get your name?' },
  { q:'Do you see kids?', a:'Absolutely! We see patients of all ages. Want to book a first visit for your little one?' },
];

function ScreenReviewAnswers({ industry }) {
  const [approved, setApproved] = React.useState(new Set([0,1,2]));
  return (
    <div style={{ height:'100%', background:BRAND.paper, display:'flex', flexDirection:'column' }}>
      <NavBar step={3} back/>
      <div style={{ flex:1, overflowY:'auto', padding:'6px 22px 0' }}>
        <MonoLabel color={BRAND.purple} style={{ display:'block', marginBottom:10 }}>§ 08 · REVIEW YOUR AGENT</MonoLabel>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:26, fontWeight:700, lineHeight:'30px', color:BRAND.ink, letterSpacing:-0.9 }}>
          Here's what your agent <span style={{ fontStyle:'italic', color:BRAND.purple, fontWeight:400 }}>will say.</span>
        </div>
        <div style={{ marginTop:6, fontSize:13.5, color:BRAND.inkMute, lineHeight:'19px' }}>Approve, edit, or flag any answer before going live.</div>

        <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:14 }}>
          {REVIEW_QA.map((qa, i) => {
            const ok = approved.has(i);
            return (
              <div key={i} style={{ borderRadius:14, background:'#fff', border:`1px solid ${ok ? BRAND.green : BRAND.hair}`, overflow:'hidden', boxShadow: ok ? `0 0 0 3px rgba(31,157,97,0.1)` : 'none' }}>
                <div style={{ padding:'10px 12px', borderBottom:`1px solid ${BRAND.hair}`, background: ok ? 'rgba(31,157,97,0.05)' : 'transparent' }}>
                  <div style={{ fontFamily:PLEX_SERIF, fontSize:13, fontWeight:600, color:BRAND.ink, letterSpacing:-0.1 }}>Q: {qa.q}</div>
                </div>
                <div style={{ padding:'9px 12px' }}>
                  <div style={{ fontFamily:PLEX_SERIF, fontSize:13, color:BRAND.inkMute, lineHeight:'18px' }}>A: {qa.a}</div>
                  <div style={{ display:'flex', gap:8, marginTop:9 }}>
                    <div onClick={() => { const n=new Set(approved); ok?n.delete(i):n.add(i); setApproved(n); }} style={{ flex:1, padding:'7px', borderRadius:8, textAlign:'center', cursor:'pointer', background: ok ? BRAND.green : BRAND.purpleSoft, border:`1px solid ${ok ? BRAND.green : BRAND.purpleLine}` }}>
                      <MonoLabel color={ok ? '#fff' : BRAND.purple} size={10}>{ok ? '✓ APPROVED' : 'APPROVE'}</MonoLabel>
                    </div>
                    <div style={{ padding:'7px 14px', borderRadius:8, border:`1px solid ${BRAND.hair}`, cursor:'pointer' }}>
                      <MonoLabel color={BRAND.inkMute} size={10}>EDIT</MonoLabel>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ padding:'10px 22px 28px' }}>
        <div style={{ textAlign:'center', marginBottom:8, fontFamily:PLEX_MONO, fontSize:10, color:BRAND.inkMute }}>
          {approved.size}/5 approved
        </div>
        <PrimaryButton disabled={approved.size < 5}>
          {approved.size < 5 ? `Approve all ${5 - approved.size} remaining →` : 'Answers look great →'}
        </PrimaryButton>
      </div>
    </div>
  );
}

// ── ⑨ CHOOSE CHANNEL — deploy on web / SMS / email ──────────────
function ScreenChooseChannel({ industry }) {
  return (
    <div style={{ height:'100%', background:BRAND.paper, display:'flex', flexDirection:'column' }}>
      <NavBar step={4} back/>
      <div style={{ flex:1, overflowY:'auto', padding:'6px 22px 0' }}>
        <MonoLabel color={BRAND.purple} style={{ display:'block', marginBottom:10 }}>§ 09 · CHOOSE CHANNEL</MonoLabel>
        <div style={{ fontFamily:PLEX_SERIF, fontSize:28, fontWeight:700, lineHeight:'32px', color:BRAND.ink, letterSpacing:-1 }}>
          Where should it <span style={{ fontStyle:'italic', color:BRAND.purple, fontWeight:400 }}>answer?</span>
        </div>
        <div style={{ marginTop:6, fontSize:13.5, color:BRAND.inkMute, lineHeight:'19px' }}>
          Most dental patients book through your website. You can add more channels any time.
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:16 }}>
          {[
            { id:'web',   title:'Website widget',  sub:'Drop-in chat bubble. One script tag.', badge:'RECOMMENDED FOR DENTAL', icon:'rect' },
            { id:'sms',   title:'SMS · Twilio',     sub:'Texts to your business number, answered instantly.', badge:null, icon:'chat' },
            { id:'email', title:'Email autorespond',sub:'Triage your support@ and info@ inbox.', badge:null, icon:'mail' },
          ].map((ch, i) => {
            const sel = i===0;
            return (
              <div key={ch.id} style={{ borderRadius:14, padding:14, background:'#fff',
                border: sel ? `1.5px solid ${BRAND.purple}` : `1px solid ${BRAND.hair}`,
                boxShadow: sel ? `0 0 0 4px ${BRAND.purpleSoft}` : 'none',
                display:'flex', alignItems:'flex-start', gap:12 }}>
                <div style={{ width:44, height:44, borderRadius:12, background: sel ? BRAND.purpleSoft : BRAND.paperDeep, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
                    {ch.icon==='rect' && <><rect x="2" y="3" width="18" height="14" rx="2" stroke={sel?BRAND.purple:BRAND.ink} strokeWidth="1.8"/><path d="M2 7h18" stroke={sel?BRAND.purple:BRAND.ink} strokeWidth="1.8"/></>}
                    {ch.icon==='chat' && <path d="M3 6a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H8l-4 3v-3a2 2 0 01-1-2V6z" stroke={sel?BRAND.purple:BRAND.ink} strokeWidth="1.8" strokeLinejoin="round"/>}
                    {ch.icon==='mail' && <><rect x="2" y="4" width="18" height="14" rx="2" stroke={sel?BRAND.purple:BRAND.ink} strokeWidth="1.8"/><path d="M3 6l8 6 8-6" stroke={sel?BRAND.purple:BRAND.ink} strokeWidth="1.8" strokeLinejoin="round"/></>}
                  </svg>
                </div>
                <div style={{ flex:1 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:7, flexWrap:'wrap' }}>
                    <span style={{ fontFamily:PLEX_SERIF, fontSize:15, fontWeight:600, color:BRAND.ink }}>{ch.title}</span>
                    {ch.badge && <MonoLabel color={BRAND.purple} size={8} style={{ background:BRAND.purpleSoft, padding:'2px 6px', borderRadius:4 }}>{ch.badge}</MonoLabel>}
                  </div>
                  <div style={{ fontSize:12.5, color:BRAND.inkMute, marginTop:3, lineHeight:'17px' }}>{ch.sub}</div>
                  {sel && (
                    <div style={{ marginTop:9, background:BRAND.ink, borderRadius:8, padding:'9px 12px', fontFamily:PLEX_MONO, fontSize:10, color:'#a896f7', letterSpacing:0.3 }}>
                      {'<script src="https://epoch-in-a-box.us/widget.js"'}
                      <br/>{'  data-key="lknd-8x4j"></script>'}
                    </div>
                  )}
                </div>
                <div style={{ width:22, height:22, borderRadius:22, border: sel?'none':`1.5px solid ${BRAND.hair}`, background: sel?BRAND.purple:'transparent', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  {sel && <svg width="11" height="9" viewBox="0 0 11 9"><path d="M1 4.5L4 7.5L10 1.5" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div style={{ padding:'10px 22px 28px' }}>
        <PrimaryButton>Deploy web widget →</PrimaryButton>
      </div>
    </div>
  );
}

// ── ⑩ GO LIVE 🎉 — agent is deployed ───────────────────────────
function ScreenGoLive({ industry }) {
  return (
    <div style={{ height:'100%', background:BRAND.purple, display:'flex', flexDirection:'column', boxSizing:'border-box' }}>
      <div style={{ position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px)', backgroundSize:'40px 40px', pointerEvents:'none' }}/>
      <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 26px', position:'relative', zIndex:2 }}>
        {/* Live indicator */}
        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:20 }}>
          <div style={{ width:10, height:10, borderRadius:'50%', background:'#2dd881', boxShadow:'0 0 0 4px rgba(45,216,129,0.35)' }}/>
          <MonoLabel color="rgba(255,255,255,0.8)" size={10} style={{ letterSpacing:1.4 }}>AGENT IS LIVE</MonoLabel>
        </div>

        <div style={{ fontFamily:PLEX_SERIF, fontSize:34, fontWeight:700, color:'#fff', lineHeight:'38px', letterSpacing:-1.2, marginBottom:8 }}>
          Lake Norman Dental's<br/>
          <span style={{ fontStyle:'italic', fontWeight:400 }}>agent is answering.</span>
        </div>
        <div style={{ fontSize:14, color:'rgba(255,255,255,0.75)', lineHeight:'20px', marginBottom:22 }}>
          Your widget is live at lakeNormanDental.com. First calls are already being handled.
        </div>

        {/* Embed code */}
        <div style={{ background:'rgba(0,0,0,0.3)', borderRadius:14, padding:'14px 16px', marginBottom:14 }}>
          <MonoLabel color="rgba(255,255,255,0.55)" size={9} style={{ display:'block', marginBottom:8 }}>EMBED CODE · ALREADY ON YOUR SITE</MonoLabel>
          <div style={{ fontFamily:PLEX_MONO, fontSize:11, color:'#a896f7', lineHeight:'18px' }}>
            {'<script src="epoch-in-a-box.us/widget.js"'}<br/>
            {'  data-key="lknd-8x4j"></script>'}
          </div>
        </div>

        {/* Share */}
        <div style={{ display:'flex', gap:8 }}>
          <div style={{ flex:1, padding:'12px', borderRadius:12, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.2)', textAlign:'center' }}>
            <span style={{ fontFamily:PLEX_SERIF, fontSize:14, fontWeight:600, color:'#fff' }}>Share link</span>
          </div>
          <div style={{ flex:1, padding:'12px', borderRadius:12, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.2)', textAlign:'center' }}>
            <span style={{ fontFamily:PLEX_SERIF, fontSize:14, fontWeight:600, color:'#fff' }}>Copy code</span>
          </div>
        </div>
      </div>

      <div style={{ padding:'0 26px 32px', position:'relative', zIndex:2 }}>
        <PrimaryButton style={{ background:'#fff', color:BRAND.purple, boxShadow:'0 8px 24px -8px rgba(0,0,0,0.3)' }}>
          View your dashboard →
        </PrimaryButton>
      </div>
    </div>
  );
}

// ── Phone wrapper ─────────────────────────────────────────────
function Phone({ children, dark = false }) {
  return <IOSDevice width={390} height={844} dark={dark}>{children}</IOSDevice>;
}

Object.assign(window, {
  ScreenDemo, ScreenNameIt, ScreenPreview, ScreenPay,
  ScreenConfirmed, ScreenBookKickoff, ScreenUploadKnowledge,
  ScreenReviewAnswers, ScreenChooseChannel, ScreenGoLive,
  Phone, BRAND, Logo, INDUSTRIES: {},
});