// Phone mockup screens — recreations of actual Ambition app UI patterns.
// Used in the hero and feature tour sections.

const PhoneIcon = ({ d, size = 16, fill = "currentColor" }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill={fill}><path d={d} /></svg>;


const ChevronDown = ({ color = "#000" }) =>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M3 5L7 9L11 5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


// Tiny icon set for tab bar
const TabIcons = {
  ambition: (active) =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill={active ? "#205FA6" : "#999"}>
      <path d="M12 2L3 21h18L12 2zm0 5l5.5 12h-11L12 7z" />
      <circle cx="12" cy="14" r="2" />
    </svg>,

  agreements: (active) =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={active ? "#205FA6" : "#999"} strokeWidth="2">
      <rect x="5" y="3" width="14" height="18" rx="2" />
      <path d="M9 8h6M9 12h6M9 16h4" strokeLinecap="round" />
    </svg>,

  convos: (active) =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={active ? "#205FA6" : "#999"} strokeWidth="2">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" strokeLinejoin="round" />
    </svg>

};

// ──────────────────────────────────────────────────────────────────
// 1. DASHBOARD SCREEN — parent's main view
// ──────────────────────────────────────────────────────────────────
function PhoneDashboard() {
  return (
    <>
      <div className="status phone-status-dark" style={{ opacity: "1", color: "rgb(255, 255, 255)", background: '#205FA6' }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <span style={{ fontSize: 11 }}>●●●</span>
          <svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M8 0a8 8 0 015.66 2.34l-1.42 1.42a6 6 0 00-8.48 0L2.34 2.34A8 8 0 018 0zm0 4a4 4 0 012.83 1.17l-1.42 1.42a2 2 0 00-2.82 0L5.17 5.17A4 4 0 018 4zm0 4l2 2-2 2-2-2 2-2z" /></svg>
          <div style={{ width: 22, height: 11, border: '1px solid #fff', borderRadius: 3, padding: 1 }}>
            <div style={{ background: '#fff', height: '100%', width: '85%', borderRadius: 1 }}></div>
          </div>
        </div>
      </div>
      <div className="phone-app-bar">
        <span style={{ width: 24 }}></span>
        <span className="title">Dashboard</span>
        <span style={{ width: 24, fontSize: 22, lineHeight: 1, color: '#fff' }}>⋯</span>
      </div>
      <div className="phone-content" style={{ background: '#EAF2FB' }}>
        {/* Teen selector */}
        <div className="phone-card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '10px 12px' }}>
          <span style={{ fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em' }}>Demetric</span>
          <ChevronDown />
        </div>

        {/* Stat row */}
        <div className="phone-card" style={{ display: 'flex', padding: '8px 0', justifyContent: 'space-around' }}>
          {[['27', 'Internship Days'], ['6', 'Life Lessons'], ['3', 'Agreements']].map(([n, l]) =>
          <div key={l} style={{ textAlign: 'center', flex: 1, borderRight: l === 'Agreements' ? 'none' : '1px solid #EAF2FB', padding: '2px 0' }}>
              <div style={{ fontSize: 17, fontWeight: 700 }}>{n}</div>
              <div style={{ fontSize: 11, color: '#757575', marginTop: 1 }}>{l}</div>
            </div>
          )}
        </div>

        <div style={{ fontWeight: 700, fontSize: 15, margin: '14px 4px 8px' }}>Current Agreement</div>

        {/* Agreement card */}
        <div className="phone-card" style={{ padding: '14px 12px' }}>
          <div style={{ fontSize: 10, color: '#757575', letterSpacing: '0.06em', fontWeight: 600 }}>REWARD</div>
          <div style={{ fontWeight: 700, fontSize: 14, marginTop: 2, marginBottom: 12 }}>1 week off from chores</div>

          <div style={{ fontSize: 10, color: '#757575', letterSpacing: '0.06em', fontWeight: 600 }}>FOR COMPLETING</div>
          <div style={{ fontWeight: 700, fontSize: 13, marginTop: 2 }}>30 internship days</div>
          <div className="progress" style={{ marginTop: 6 }}>
            <i style={{ width: '33%' }}></i>
          </div>
          <div style={{ fontSize: 11, color: '#388E3C', fontWeight: 600, marginTop: 4 }}>10 completed</div>

          <div style={{ fontSize: 10, color: '#757575', letterSpacing: '0.06em', fontWeight: 600, marginTop: 10 }}>AND COMPLETING</div>
          <div style={{ fontWeight: 700, fontSize: 13, marginTop: 2 }}>10 life lessons</div>
          <div className="progress" style={{ marginTop: 6 }}>
            <i style={{ width: '40%' }}></i>
          </div>
          <div style={{ fontSize: 11, color: '#388E3C', fontWeight: 600, marginTop: 4 }}>4 completed</div>
        </div>

        <button style={{ width: '100%', background: '#205FA6', color: '#fff', padding: '10px', borderRadius: 4, fontWeight: 700, fontSize: 13, marginTop: 6 }}>
          Past Agreements
        </button>
      </div>
      <PhoneTabBar active="dashboard" />
    </>);

}

// ──────────────────────────────────────────────────────────────────
// 2. CONVERSATION SCREEN
// ──────────────────────────────────────────────────────────────────
function PhoneConversation() {
  return (
    <>
      <div className="status phone-status-dark" style={{ background: "rgb(32, 95, 166)" }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <span style={{ fontSize: 11 }}>●●●</span>
          <svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M8 0a8 8 0 015.66 2.34l-1.42 1.42a6 6 0 00-8.48 0L2.34 2.34A8 8 0 018 0z" /></svg>
          <div style={{ width: 22, height: 11, border: '1px solid #fff', borderRadius: 3, padding: 1 }}>
            <div style={{ background: '#fff', height: '100%', width: '85%', borderRadius: 1 }}></div>
          </div>
        </div>
      </div>
      <div className="phone-app-bar" style={{ background: "rgb(32, 95, 166)" }}>
        <span style={{ width: 24 }}></span>
        <span className="title">Conversations</span>
        <span style={{ width: 24 }}></span>
      </div>
      <div className="phone-content" style={{ background: '#EAF2FB', padding: '12px 14px 80px' }}>
        <div className="phone-card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '10px 12px' }}>
          <span style={{ fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em' }}>Demetric</span>
          <ChevronDown />
        </div>

        <div style={{ fontWeight: 700, fontSize: 15, margin: '14px 4px 8px' }}>Next Topic</div>

        <div className="phone-card" style={{ padding: 14, textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#757575' }}>
            <span>Conversation #4</span>
            <span>Level 1</span>
          </div>
          <div style={{ fontSize: 28, margin: '14px 0 8px' }}>💵</div>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Future Lifestyle</div>
          <div style={{ fontSize: 12, color: '#000', marginTop: 6, lineHeight: 1.35 }}>
            A career does not just shape how you work. It shapes how you live.
          </div>
          <div style={{ fontSize: 11, color: '#757575', marginTop: 10, lineHeight: 1.4 }}>
            Demetric will start this conversation after 5 more internship days.
          </div>
          <button style={{ width: '100%', background: '#388E3C', color: '#fff', padding: '10px', borderRadius: 4, fontWeight: 700, fontSize: 13, marginTop: 12 }}>
            Open Conversation
          </button>
        </div>

        <div style={{ fontWeight: 700, fontSize: 15, margin: '14px 4px 8px' }}>Past Topics</div>

        <div className="phone-card" style={{ padding: '10px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontWeight: 700, fontSize: 13 }}>Money Reality</span>
            <span style={{ fontSize: 11, color: '#757575' }}>Sunday ›</span>
          </div>
          <div style={{ marginTop: 4, color: '#D32F2F', fontWeight: 700, fontSize: 11, textAlign: 'center' }}>NEW MESSAGE</div>
        </div>
        <div className="phone-card" style={{ padding: '10px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontWeight: 700, fontSize: 13 }}>Work Life Balance</span>
            <span style={{ fontSize: 11, color: '#757575' }}>5/8/26 ›</span>
          </div>
        </div>
      </div>
      <PhoneTabBar active="convos" />
    </>);

}

// ──────────────────────────────────────────────────────────────────
// 3. LESSON / INTERNSHIP SCREEN — colorful "ambitious mindset"
// ──────────────────────────────────────────────────────────────────
function PhoneLesson() {
  return (
    <>
      <div className="status phone-status-light" style={{ background: '#DB1F5E' }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: '#fff' }}>●●●</span>
          <svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M8 0a8 8 0 015.66 2.34l-1.42 1.42a6 6 0 00-8.48 0L2.34 2.34A8 8 0 018 0z" /></svg>
          <div style={{ width: 22, height: 11, border: '1px solid #fff', borderRadius: 3, padding: 1 }}>
            <div style={{ background: '#fff', height: '100%', width: '85%', borderRadius: 1 }}></div>
          </div>
        </div>
      </div>
      <div style={{ background: '#DB1F5E', height: 'calc(100% - 44px)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff' }}>
          <span style={{ fontSize: 22 }}>✕</span>
          <span style={{ fontWeight: 600, fontSize: 14 }}>Start Lesson</span>
        </div>
        <div style={{ padding: '16px', flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ background: '#fff', borderRadius: 14, padding: '24px 18px 18px', textAlign: 'center', position: 'relative', marginTop: 18 }}>
            <div style={{
              position: 'absolute', top: -28, left: '50%', transform: 'translateX(-50%)',
              width: 56, height: 56, borderRadius: '50%', background: '#fff',
              display: 'grid', placeItems: 'center', fontSize: 32,
              boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
            }}>🧠</div>
            <div style={{ fontWeight: 700, fontSize: 16, marginTop: 10, letterSpacing: '-0.01em' }}>Build an Ambitious Mindset</div>
            <div style={{ fontSize: 12, color: '#333', marginTop: 6, lineHeight: 1.4 }}>
              Learn how to improve the most important factor for success, your mindset.
            </div>
          </div>
          <div style={{ background: '#fff', borderRadius: 14, padding: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 6, background: '#EFE4D4', display: 'grid', placeItems: 'center', fontSize: 16 }}>⏱</div>
              <div style={{ fontWeight: 700, fontSize: 13 }}>5 mins to complete</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 6, background: '#FFE4B0', display: 'grid', placeItems: 'center', fontSize: 14 }}>📋</div>
              <div style={{ fontWeight: 600, fontSize: 12, lineHeight: 1.35 }}>Life Areas: Personal, Career, Education, Relationships</div>
            </div>
            <button style={{ background: '#DB1F5E', color: '#fff', padding: '12px', borderRadius: 10, fontWeight: 700, fontSize: 14, marginTop: 4 }}>
              Start Lesson
            </button>
          </div>
        </div>
      </div>
    </>);

}

// ──────────────────────────────────────────────────────────────────
// 4. REWARDS / GIFT CARD SCREEN
// ──────────────────────────────────────────────────────────────────
function PhoneRewards() {
  return (
    <>
      <div className="status phone-status-dark" style={{ background: '#205FA6' }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <span style={{ fontSize: 11 }}>●●●</span>
          <svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M8 0a8 8 0 015.66 2.34l-1.42 1.42a6 6 0 00-8.48 0L2.34 2.34A8 8 0 018 0z" /></svg>
          <div style={{ width: 22, height: 11, border: '1px solid #fff', borderRadius: 3, padding: 1 }}>
            <div style={{ background: '#fff', height: '100%', width: '85%', borderRadius: 1 }}></div>
          </div>
        </div>
      </div>
      <div style={{ background: '#205FA6', height: 'calc(100% - 44px)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '8px 16px', display: 'flex', alignItems: 'center', color: '#fff', gap: 12 }}>
          <span style={{ fontSize: 22 }}>✕</span>
          <span style={{ fontWeight: 700, fontSize: 16, flex: 1, textAlign: 'center', marginRight: 22 }}>Choose Your Reward</span>
        </div>
        <div style={{ padding: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
          { name: 'Amazon Gift Card', bg: '#0E1A2E', logo: 'amazon' },
          { name: 'Walmart Gift Card', bg: '#0071CE', logo: 'walmart' },
          { name: 'Target Gift Card', bg: '#CC0000', logo: 'target' },
          { name: 'Apple Gift Card', bg: '#F5F5F5', logo: 'apple' },
          { name: 'Nike Gift Card', bg: '#FF3D00', logo: 'nike' },
          { name: 'Chipotle', bg: '#A21F23', logo: 'chipotle' }].
          map((card) =>
          <div key={card.name} style={{ background: '#fff', borderRadius: 8, padding: 6, textAlign: 'center' }}>
              <div style={{
              background: card.bg, aspectRatio: '1.6/1', borderRadius: 4,
              display: 'grid', placeItems: 'center',
              color: card.logo === 'apple' ? '#000' : '#fff', fontWeight: 700, fontSize: 12, letterSpacing: '0.05em'
            }}>
                {card.logo === 'amazon' && <span style={{ color: '#FF9900', fontSize: 14, fontFamily: 'serif', fontStyle: 'italic' }}>gift</span>}
                {card.logo === 'walmart' && <span style={{ color: '#FFC220', fontSize: 18 }}>✦</span>}
                {card.logo === 'target' && <span style={{ background: '#fff', color: '#CC0000', borderRadius: '50%', width: 22, height: 22, display: 'grid', placeItems: 'center', fontSize: 10 }}>◎</span>}
                {card.logo === 'apple' && <span style={{ fontSize: 16 }}>🍎</span>}
                {card.logo === 'nike' && <span style={{ fontSize: 16, fontStyle: 'italic', fontWeight: 900 }}>✓</span>}
                {card.logo === 'chipotle' && <span style={{ fontSize: 11 }}>CHIPOTLE</span>}
              </div>
              <div style={{ fontSize: 10, fontWeight: 600, marginTop: 4, color: '#000' }}>{card.name}</div>
            </div>
          )}
        </div>
      </div>
    </>);

}

// ──────────────────────────────────────────────────────────────────
// 5. AGREEMENT BUILDER MODAL
// ──────────────────────────────────────────────────────────────────
function PhoneAgreement() {
  return (
    <>
      <div className="status phone-status-dark" style={{ background: '#205FA6' }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <span style={{ fontSize: 11 }}>●●●</span>
          <svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M8 0a8 8 0 015.66 2.34l-1.42 1.42a6 6 0 00-8.48 0L2.34 2.34A8 8 0 018 0z" /></svg>
          <div style={{ width: 22, height: 11, border: '1px solid #fff', borderRadius: 3, padding: 1 }}>
            <div style={{ background: '#fff', height: '100%', width: '85%', borderRadius: 1 }}></div>
          </div>
        </div>
      </div>
      <div className="phone-app-bar">
        <span style={{ fontSize: 22, lineHeight: 1, color: '#fff' }}>✕</span>
        <span className="title">New Agreement</span>
        <span style={{ width: 24 }}></span>
      </div>
      <div className="phone-content" style={{ background: '#EAF2FB' }}>
        <div className="phone-card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10, color: '#757575', letterSpacing: '0.06em', fontWeight: 600 }}>REWARD</div>
          <div style={{ marginTop: 6, padding: '10px 12px', border: '1px solid #BFD7F3', borderRadius: 4, fontSize: 13, fontWeight: 600 }}>1 week off from chores</div>

          <div style={{ fontSize: 10, color: '#757575', letterSpacing: '0.06em', fontWeight: 600, marginTop: 14 }}>FOR COMPLETING</div>
          <div style={{ marginTop: 6, padding: '10px 12px', border: '1px solid #BFD7F3', borderRadius: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
            <span style={{ fontWeight: 600 }}>Internship Days</span>
            <span style={{ fontWeight: 700, color: '#205FA6' }}>30</span>
          </div>
          <div style={{ marginTop: 6, padding: '10px 12px', border: '1px solid #BFD7F3', borderRadius: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
            <span style={{ fontWeight: 600 }}>Life Lessons</span>
            <span style={{ fontWeight: 700, color: '#205FA6' }}>10</span>
          </div>

          <div style={{ fontSize: 10, color: '#757575', letterSpacing: '0.06em', fontWeight: 600, marginTop: 14 }}>BY</div>
          <div style={{ marginTop: 6, padding: '10px 12px', border: '1px solid #BFD7F3', borderRadius: 4, fontSize: 13, fontWeight: 600 }}>September 1, 2026</div>
        </div>

        <button style={{ width: '100%', background: '#205FA6', color: '#fff', padding: '12px', borderRadius: 4, fontWeight: 700, fontSize: 14, marginTop: 6 }}>Send to Megan

        </button>
        <div style={{ textAlign: 'center', fontSize: 11, color: '#757575', marginTop: 8 }}>Megan will approve before it starts

        </div>
      </div>
      <PhoneTabBar active="agreements" />
    </>);

}

function PhoneTabBar({ active }) {
  return (
    <div className="phone-tabbar">
      <div className={`phone-tab ${active === 'dashboard' ? 'active' : ''}`}>
        <div className="tab-ico">{TabIcons.ambition(active === 'dashboard')}</div>
        <span>Dashboard</span>
      </div>
      <div className={`phone-tab ${active === 'agreements' ? 'active' : ''}`}>
        <div className="tab-ico">{TabIcons.agreements(active === 'agreements')}</div>
        <span>Agreements</span>
      </div>
      <div className={`phone-tab ${active === 'convos' ? 'active' : ''}`}>
        <div className="tab-ico">{TabIcons.convos(active === 'convos')}</div>
        <span>Conversations</span>
      </div>
    </div>);

}

// ──────────────────────────────────────────────────────────────────
// 6. INTERNSHIPS / WORK TAB (not enrolled)
// ──────────────────────────────────────────────────────────────────
function PhoneInternships() {
  const cards = [
  { title: 'Entrepreneurship @ Tech Startup', desc: 'Intern for tech entrepreneurs building a new social video app for teens.', bg: '#324AC1', icon: '📱' },
  { title: 'Game Design @ Gaming Startup', desc: 'Intern at a new gaming company building a social game for high schoolers.', bg: '#7A8A95', icon: '🎮' },
  { title: 'Marketing @ Fashion Startup', desc: "Intern on the marketing team of a new fashion company that's trying to grow.", bg: '#E84B4B', icon: '📣' },
  { title: 'Wealth Management @ Bank', desc: 'Intern at a bank on the wealth management team to help clients build wealth.', bg: '#3DB36B', icon: '🏦', soon: true }];

  return (
    <>
      <div className="status phone-status-dark" style={{ background: "rgb(32, 95, 166)" }}>
        <span>9:41</span>
        <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <span style={{ fontSize: 11 }}>●●●</span>
          <svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M8 0a8 8 0 015.66 2.34l-1.42 1.42a6 6 0 00-8.48 0L2.34 2.34A8 8 0 018 0z" /></svg>
          <div style={{ width: 22, height: 11, border: '1px solid #fff', borderRadius: 3, padding: 1 }}>
            <div style={{ background: '#fff', height: '100%', width: '85%', borderRadius: 1 }}></div>
          </div>
        </div>
      </div>
      <div style={{ color: '#fff', padding: '6px 14px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, fontWeight: 600, background: "rgb(32, 95, 166)" }}>
        <span style={{ opacity: 0.95 }}>FAQs</span>
        <span style={{ fontWeight: 700, fontSize: 15 }}>Work</span>
        <span style={{ opacity: 0.95 }}>History</span>
      </div>
      <div style={{ background: '#EAF2FB', padding: '14px 12px 80px' }}>
        <div style={{ fontWeight: 800, fontSize: 17, letterSpacing: '-0.02em', margin: '2px 4px 10px' }}>Ambition Internships</div>
        <div style={{ display: 'flex', gap: 6, overflow: 'hidden', marginBottom: 12 }}>
          {[
          { l: 'Business', i: '🏬' },
          { l: 'STEM', i: '⚛️' },
          { l: 'Arts & Com…', i: '🎨' }].
          map((c) =>
          <div key={c.l} style={{ background: '#fff', borderRadius: 8, padding: '6px 10px', display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 700, border: '1px solid #E0E7F0', flexShrink: 0 }}>
              <span style={{ fontSize: 12 }}>{c.i}</span><span>{c.l}</span>
            </div>
          )}
        </div>
        {cards.map((c, i) =>
        <div key={i} style={{ background: '#fff', borderRadius: 10, overflow: 'hidden', marginBottom: 10, border: '1px solid #E0E7F0' }}>
            <div style={{ background: c.bg, height: 56, position: 'relative', display: 'grid', placeItems: 'center' }}>
              {c.soon &&
            <div style={{ position: 'absolute', top: 6, left: 6, background: '#fff', color: '#000', fontSize: 8, fontWeight: 700, padding: '2px 6px', borderRadius: 999 }}>Coming Soon</div>
            }
              <div style={{ position: 'absolute', top: 6, right: 6, background: '#fff', color: '#000', fontSize: 8, fontWeight: 700, padding: '2px 6px', borderRadius: 999 }}>Business</div>
              <div style={{ width: 36, height: 36, background: '#fff', borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 18 }}>{c.icon}</div>
            </div>
            <div style={{ padding: '8px 10px 10px' }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: '#000', lineHeight: 1.25 }}>{c.title}</div>
              <div style={{ fontSize: 9.5, color: '#000', marginTop: 3, lineHeight: 1.3 }}>{c.desc}</div>
            </div>
          </div>
        )}
        <button style={{ width: '100%', background: '#205FA6', color: '#fff', padding: '10px', borderRadius: 6, fontWeight: 700, fontSize: 12, marginTop: 4 }}>
          Browse All Internships
        </button>
      </div>
    </>);

}

// Wrapper Phone shell — pass `screen` prop to swap content
function Phone({ screen = 'dashboard', style }) {
  const screens = {
    dashboard: <PhoneDashboard />,
    conversation: <PhoneConversation />,
    lesson: <PhoneLesson />,
    rewards: <PhoneRewards />,
    agreement: <PhoneAgreement />,
    internships: <PhoneInternships />
  };
  return (
    <div className="phone" style={style}>
      <div className="notch"></div>
      <div className="screen">
        {screens[screen]}
      </div>
    </div>);

}

Object.assign(window, { Phone, PhoneDashboard, PhoneConversation, PhoneLesson, PhoneRewards, PhoneAgreement, PhoneInternships, ChevronDown });