// parts1.jsx — Brand, Nav, Ticker, Hero

const ASSET = '_ds/assets/';
const SCREENS = '_ds/screenshots/';

const AppleIcon = () =>
<svg width="13" height="16" viewBox="0 0 814 1000" fill="currentColor" style={{ flexShrink: 0, display: 'block' }}>
    <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 790.7 0 663 0 541.8c0-207.5 135.4-317.3 269-317.3 70.1 0 128.4 46.4 172.5 46.4 42.8 0 109.6-50.3 190.5-50.3zm-108-176.7c31.5-37.9 54.3-90.8 54.3-143.7 0-7.7-.6-15.4-1.9-21.8-51.6 2-112.3 34.5-148.4 78.3-28.5 32.7-56.3 85.6-56.3 139.2 0 8.3 1.3 16.6 1.9 19.1 3.2.6 8.4 1.3 13.6 1.3 46.4 0 102.7-30.8 136.8-72.4z" />
  </svg>;


function Brand({ size = 30 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <div className="brand">
        <span className="w brand-title" style={{ fontSize: size }}>VENTURER</span>
        <span className="dot" style={{ width: Math.round(size * 0.29), height: Math.round(size * 0.29) }}></span>
      </div>
      <span className="brand-subtitle" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500, letterSpacing: '3px', color: 'var(--text-secondary)', textTransform: 'uppercase', lineHeight: 0.1, marginLeft: 5 }}>City Guide</span>
    </div>);

}

function PhoneCard({ src, className, style }) {
  const cls = 'phone-card' + (className ? ' ' + className : '');
  return (
    <div className={cls} style={style}>
      <img src={src} alt="" />
    </div>);
}

function HeroPhoneCarousel() {
  const screens = [
  'assets/screen4.jpg', 'assets/screen2.jpg', 'assets/screen8.jpg',
  'assets/screen1.jpg', 'assets/screen6.jpg',
  'assets/screen5.jpg', 'assets/screen7.jpg'];

  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => {
      setActive((a) => (a + 1) % screens.length);
    }, 5000);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="pf-body">
      <div className="pf-vol-up"></div>
      <div className="pf-vol-dn"></div>
      <div className="pf-power"></div>
      <div className="pf-screen">
        <div className="pf-punch"></div>
        {screens.map((src, i) =>
        <img
          key={src}
          src={src}
          alt=""
          draggable="false"
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'top',
            opacity: i === active ? 1 : 0,
            transition: 'opacity 0.7s ease',
            pointerEvents: 'none',
            userSelect: 'none'
          }} />

        )}
      </div>
    </div>);


}

function Nav({ onCta, onIosCta, platform }) {
  return (
    <nav className={`nav nav-platform-${platform}`}>
      <div className="wrap nav-in">
        <Brand />
        <div className="nav-right" style={{ gap: 10 }}>
          <button
            className="btn btn-dark nav-android-btn"
            style={{ padding: '10px 20px', fontSize: 13, whiteSpace: 'nowrap' }}
            onClick={onCta}>
            <span className="mdi-fill" style={{ fontSize: 16 }}>android</span>
            <span className="nav-cta-full">Get for Android</span>
            <span className="nav-cta-short">Get now</span>
          </button>
          {onIosCta && (
          <button
            className="btn btn-ghost nav-ios-btn"
            style={{ padding: '10px 20px', fontSize: 13, whiteSpace: 'nowrap' }}
            onClick={onIosCta}>
            <AppleIcon />
            <span className="ios-label-long">Request for iOS</span>
            <span className="ios-label-short">REQUEST</span>
          </button>
          )}
        </div>
      </div>
    </nav>);

}

function Ticker() {
  const cities = [
  'Bratislava', 'Berlin', 'Brussels', 'Madrid', 'Barcelona'];

  // Repeat enough times so one Item is always wider than any viewport
  const repeated = [...cities, ...cities, ...cities, ...cities];

  const Item = () =>
  <span className="ticker-item">
      {repeated.map((c, i) =>
    <React.Fragment key={i}>
          {c}<span className="dot" style={{ width: '0.38em', height: '0.38em', marginLeft: '0.5em', marginRight: '0.5em', verticalAlign: 'middle' }}></span>
        </React.Fragment>
    )}
    </span>;

  return (
    <div className="ticker" style={{ padding: "18px 0px" }}>
      <div className="ticker-track">
        <Item /><Item />
      </div>
    </div>);

}

function Hero({ onCta, onIosCta }) {
  const scrollToFeatures = () => {
    const el = document.getElementById('features');
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };

  return (
    <header className="hero" style={{ padding: "64px 0px 40px" }}>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">
              <span className="mdi-fill" style={{ fontSize: 13 }}>auto_awesome</span>
              FREE ANDROID BETA
            </span>
            <h1>
              From must-see spots to hidden gems, explore cities the smart way<span className="dot"></span>
            </h1>
            <p className="sub" style={{ maxWidth: 'none' }}>Find places worth visiting, create an optimal walking route and hear the story behind every stop. For tourists visiting a city and locals who still have streets left to explore.

            </p>
            <div className="hero-cta">
              <button className="btn btn-dark" onClick={onCta}>
                <span className="mdi-fill">android</span>
                Get for Android
              </button>
              {onIosCta && (
              <button className="btn btn-ghost" onClick={onIosCta}>
                <AppleIcon />
                Request for iOS
              </button>
              )}
            </div>
            
          </div>
          <div className="hero-screens">
            <HeroPhoneCarousel />
          </div>
        </div>
      </div>
      <div style={{ marginTop: 68 }}>
        <Ticker />
      </div>
    </header>);

}

Object.assign(window, { AppleIcon, Brand, PhoneCard, HeroPhoneCarousel, Nav, Ticker, Hero, ASSET, SCREENS });