function Wordmark({ onDark = false, size = 'md' }) {
  const big = size === 'lg';
  const iconSize = big ? 64 : 40;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: big ? 14 : 10 }}>
      <div style={{ borderRadius: iconSize * 0.225, overflow: 'hidden',
        boxShadow: onDark ? '0 4px 14px rgba(0,0,0,0.3)' : '0 4px 14px rgba(15,30,46,0.12)' }}>
        <IconE size={iconSize} />
      </div>
      <div>
        <div style={{
          fontSize: big ? 28 : 22, fontWeight: 900, letterSpacing: '-0.6px',
          color: onDark ? '#fff' : 'var(--logit-ink)', lineHeight: 1,
        }}>LogIt</div>
        <div style={{
          fontSize: big ? 12 : 10, fontWeight: 500, letterSpacing: 0.6,
          marginTop: 3, color: onDark ? 'rgba(255,255,255,0.5)' : 'var(--logit-grey-500)',
          textTransform: 'uppercase',
        }}>
          by <span style={{ color: 'var(--logit-blue)', fontWeight: 700, textTransform: 'none', fontSize: big ? 14 : 12 }}>Locate2u</span>
        </div>
      </div>
    </div>
  );
}

function Nav() {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30,
      padding: '24px 64px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <Wordmark onDark={true} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
        {['Features', 'For who', 'FAQ'].map(l => (
          <a key={l} href={`#${l.toLowerCase().replace(/\s/g, '-')}`} style={{
            color: 'rgba(255,255,255,0.75)', fontSize: 14, fontWeight: 500,
            textDecoration: 'none',
          }}>{l}</a>
        ))}
        <a href="#download" style={{
          padding: '10px 22px', borderRadius: 100, border: 'none',
          background: 'var(--logit-blue)', color: '#fff', fontFamily: 'inherit',
          fontSize: 14, fontWeight: 700, cursor: 'pointer', textDecoration: 'none',
          boxShadow: '0 4px 14px rgba(0,167,226,0.4)',
        }}>Download</a>
      </div>
    </div>
  );
}

function PhoneMockup({ screen, screenshot, tilt = 0, scale = 1 }) {
  return (
    <div style={{
      width: 410, height: 838,
      transform: `rotate(${tilt}deg) scale(${scale})`,
      transformOrigin: 'center',
      filter: 'drop-shadow(0 32px 64px rgba(6,24,48,0.45))',
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 52, overflow: 'hidden',
        background: '#000', padding: 10, boxSizing: 'border-box',
        boxShadow: '0 0 0 2px rgba(255,255,255,0.06) inset',
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 42, overflow: 'hidden',
          background: '#000', position: 'relative',
        }}>
          <div style={{
            position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
            width: 110, height: 32, borderRadius: 22, background: '#000', zIndex: 20,
          }} />
          {screenshot ? (
            <img src={screenshot} alt="App screen" style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            }} />
          ) : (
            <>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 50,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '14px 28px', color: '#fff', fontSize: 14, fontWeight: 600, zIndex: 10 }}>
                <span>9:41</span>
                <span />
                <span style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 11 }}>
                  <span>&#9679;&#9679;&#9679;&#9679;</span>
                  <span style={{ width: 22, height: 11, borderRadius: 2, background: '#fff' }} />
                </span>
              </div>
              <div style={{ paddingTop: 50, width: '100%', height: '100%', boxSizing: 'border-box',
                display: 'flex', justifyContent: 'center', background: '#000' }}>
                <div style={{ width: 390 }}>{screen}</div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function AppStoreBadge({ store = 'apple' }) {
  const apple = store === 'apple';
  const href = apple
    ? 'https://apps.apple.com/us/app/logit-ato-logbook/id6773195233'
    : 'https://play.google.com/store/apps/details?id=com.locate2u.logit';
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '10px 18px', borderRadius: 12,
      background: '#000', color: '#fff', textDecoration: 'none',
      border: '1px solid rgba(255,255,255,0.15)',
      minWidth: 180, transition: 'transform 120ms',
    }}>
      {apple ? (
        <svg width="28" height="32" viewBox="0 0 384 512" fill="#fff">
          <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zM256.6 84.5c30.4-36.1 27.7-69 26.8-80.5-27 1.6-58.2 18.4-76 39.1-19.6 22.2-31.1 49.7-28.6 78.9 29.2 2.2 55.9-12.8 77.8-37.5z"/>
        </svg>
      ) : (
        <svg width="28" height="32" viewBox="0 0 512 512">
          <path fill="#34d399" d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1z"/>
          <path fill="#fbbf24" d="M104.6 499L325.3 277.7l60.1 60.1L104.6 499z"/>
          <path fill="#fb7185" d="M385.4 337.8L325.3 277.7 281.5 256l43.8-21.7 60.1 60.1c25.9 14.9 25.9 28.8 0 43.4z"/>
          <path fill="#60a5fa" d="M104.6 13l220.7 221.3L281.5 256 104.6 499c-13.3-5.6-22.3-18.9-22.3-37.7V50.7c0-18.8 9-32.1 22.3-37.7z"/>
        </svg>
      )}
      <div>
        <div style={{ fontSize: 10, opacity: 0.7, letterSpacing: 0.3 }}>
          {apple ? 'Download on the' : 'GET IT ON'}
        </div>
        <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3, lineHeight: 1.1 }}>
          {apple ? 'App Store' : 'Google Play'}
        </div>
      </div>
    </a>
  );
}

function FeatureCard({ eyebrow, title, body, accent = 'blue', children }) {
  const accentColor = accent === 'green' ? 'var(--logit-business)' :
                      accent === 'amber' ? 'var(--logit-personal)' :
                      'var(--logit-blue)';
  return (
    <div style={{
      background: '#fff', borderRadius: 24,
      border: '1px solid var(--logit-grey-200)',
      padding: '32px 32px 36px', display: 'flex', flexDirection: 'column', gap: 16,
      boxShadow: 'var(--logit-shadow-card)',
      minHeight: 380,
    }}>
      <div style={{
        fontSize: 12, fontWeight: 700, letterSpacing: 1.4,
        color: accentColor, textTransform: 'uppercase',
      }}>{eyebrow}</div>
      <h3 style={{
        margin: 0, fontSize: 28, lineHeight: 1.12, letterSpacing: '-0.8px',
        fontWeight: 800, color: 'var(--logit-ink)',
      }}>{title}</h3>
      <p style={{
        margin: 0, fontSize: 16, lineHeight: 1.55, color: 'var(--logit-grey-500)',
        fontWeight: 400, flex: 1,
      }}>{body}</p>
      {children}
    </div>
  );
}

function PersonaCard({ photo, role, name, quote, deduction }) {
  return (
    <div style={{
      background: '#fff', borderRadius: 20, overflow: 'hidden',
      border: '1px solid var(--logit-grey-200)',
      boxShadow: 'var(--logit-shadow-card)',
    }}>
      <div style={{
        height: 220, background: `url(${photo}) center/cover`, position: 'relative',
        backgroundColor: 'var(--logit-navy-2)',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, transparent 50%, rgba(6,24,48,0.85) 100%)',
        }} />
        <div style={{
          position: 'absolute', bottom: 14, left: 16, right: 16, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2,
              color: 'var(--logit-blue-2)', textTransform: 'uppercase' }}>{role}</div>
            <div style={{ fontSize: 18, fontWeight: 800, marginTop: 2 }}>{name}</div>
          </div>
          <div style={{
            background: 'rgba(0,211,138,0.95)', color: '#062b1f',
            padding: '6px 12px', borderRadius: 100,
            fontSize: 13, fontWeight: 800,
          }}>+{deduction}</div>
        </div>
      </div>
      <div style={{ padding: '20px 22px 24px' }}>
        <div style={{ fontSize: 28, color: 'var(--logit-blue)', fontWeight: 900, lineHeight: 0.6, marginBottom: 4 }}>{'“'}</div>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--logit-grey-700)' }}>
          {quote}
        </p>
      </div>
    </div>
  );
}

function FaqRow({ q, a, open = false }) {
  const [isOpen, setIsOpen] = React.useState(open);
  return (
    <div style={{ borderTop: '1px solid var(--logit-grey-200)', padding: '24px 0' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, cursor: 'pointer' }}
        onClick={() => setIsOpen(!isOpen)}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 19, fontWeight: 700, color: 'var(--logit-ink)', letterSpacing: '-0.3px' }}>{q}</div>
          {isOpen && (
            <p style={{ margin: '12px 0 0', fontSize: 16, color: 'var(--logit-grey-500)', lineHeight: 1.6, maxWidth: 720 }}>{a}</p>
          )}
        </div>
        <div style={{
          width: 32, height: 32, borderRadius: 16, flexShrink: 0,
          background: isOpen ? 'var(--logit-blue)' : 'var(--logit-grey-100)',
          color: isOpen ? '#fff' : 'var(--logit-grey-700)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, fontWeight: 600, transition: 'all 200ms',
        }}>{isOpen ? '−' : '+'}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Wordmark, Nav, PhoneMockup, AppStoreBadge, FeatureCard, PersonaCard, FaqRow });