// Landing page — sticks close to the reference content structure

function PhoneSilhouette() {
  // Abstract geometric phone — SVG only
  return (
    <svg viewBox="0 0 280 460" width="60%" height="auto" aria-hidden="true">
      <defs>
        <linearGradient id="phoneFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a1a1f"/>
          <stop offset="100%" stopColor="#0a0a0c"/>
        </linearGradient>
        <linearGradient id="screenFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#15151a"/>
          <stop offset="100%" stopColor="#0d0d10"/>
        </linearGradient>
        <linearGradient id="glow" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="rgba(255,51,102,0.0)"/>
          <stop offset="50%" stopColor="rgba(255,51,102,0.18)"/>
          <stop offset="100%" stopColor="rgba(255,51,102,0.0)"/>
        </linearGradient>
      </defs>
      {/* Body */}
      <rect x="20" y="10" width="240" height="440" rx="36" fill="url(#phoneFill)" stroke="rgba(255,255,255,0.14)" strokeWidth="1"/>
      {/* Screen */}
      <rect x="32" y="22" width="216" height="416" rx="26" fill="url(#screenFill)" stroke="rgba(255,255,255,0.06)" strokeWidth="1"/>
      {/* Accent diagonal stripe */}
      <rect x="32" y="22" width="216" height="416" rx="26" fill="url(#glow)"/>
      {/* Notch */}
      <rect x="110" y="32" width="60" height="14" rx="7" fill="#08080a"/>
      {/* On-screen geometric layout */}
      <rect x="52" y="70" width="120" height="14" rx="2" fill="rgba(255,255,255,0.14)"/>
      <rect x="52" y="92" width="80" height="10" rx="2" fill="rgba(255,255,255,0.08)"/>
      <rect x="52" y="120" width="176" height="64" rx="8" fill="rgba(255,51,102,0.12)" stroke="rgba(255,51,102,0.4)"/>
      <text x="64" y="148" fontFamily="'Geist Mono', monospace" fontSize="11" fill="#ff3366" letterSpacing="0.1em">$100 USDC</text>
      <text x="64" y="168" fontFamily="'Geist Mono', monospace" fontSize="9" fill="rgba(255,255,255,0.4)">DEPOSIT ACTIVE</text>
      {/* App grid */}
      <g>
        {Array.from({ length: 12 }).map((_, i) => {
          const x = 52 + (i % 4) * 46;
          const y = 210 + Math.floor(i / 4) * 56;
          return <rect key={i} x={x} y={y} width="36" height="36" rx="8" fill="rgba(255,255,255,0.05)"/>;
        })}
      </g>
      <rect x="100" y="420" width="80" height="4" rx="2" fill="rgba(255,255,255,0.18)"/>
    </svg>
  );
}

function Landing({ onConnect, tweaks }) {
  return (
    <>
      <nav className="nav">
        <div className="nav-inner">
          <a href="#" className="brand">
            <span className="brand-mark"></span>
            <span>Terran</span>
          </a>
          <div className="nav-links">
            <a href="#device">Device</a>
            <a href="#preorder">Pre-order</a>
            <a href="#builders">Builders</a>
          </div>
          <button className="btn btn-ghost" onClick={onConnect} style={{padding:'8px 14px', fontSize:13}}>Connect Wallet</button>
        </div>
      </nav>

      {/* Hero */}
      <section className="hero">
        <div className="container-tight">
          <Reveal>
            <div className="eyebrow">IN STEALTH. EARLY ACCESS OPEN.</div>
            <h1>The Ultimate Crypto Smartphone.</h1>
            <p className="lead">
              Leave the complicated workarounds behind. Whether you are managing your portfolio or
              exploring decentralized apps, the Terran-enabled Schok Quantum Ultra is your direct
              connection to the new digital economy. Experience crypto as it was meant to be: effortless,
              invisible, and truly yours.
            </p>
            <div style={{marginTop: 32}}>
              <button className="btn btn-solid btn-lg" onClick={onConnect}>Reserve Yours Today</button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Best smartphone */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{textAlign:'center', maxWidth:640, margin:'0 auto 56px'}}>
              <h2>The Best Smartphone for Crypto.</h2>
              <p className="lead" style={{margin:'18px auto 0'}}>
                Standard phones treat your digital assets like an afterthought. The Schok Quantum Ultra is
                engineered to be the ultimate tool for trading, spending, and securing your cryptocurrency
                natively.
              </p>
            </div>
          </Reveal>

          <Reveal>
            <div className="numbered-h">
              <span className="n">1 //</span>
              <h3>For the Everyday User: Crypto Made Simple</h3>
            </div>
            <p style={{color:'var(--text-soft)', fontSize:14, maxWidth:720, marginBottom: 28}}>
              Standard smartphones make crypto complicated. We fixed that. Terran makes buying, holding, and
              using Bitcoin, Ethereum, and other digital assets as easy as sending a text message—all without
              changing how you use your normal daily apps.
            </p>
            <div className="grid-3">
              {[
                { t: "Pay With Crypto", b: "Use your digital assets in the real world. With built-in wallets, you can use digital dollars (like USDC) or altcoins to buy your morning coffee, split a dinner bill with friends, or send money globally instantly—without bank fees." },
                { t: "Apps That Reward You", b: "Discover a completely new kind of app ecosystem. Instead of mega corporations making money off your data, these apps reward you. Download games that pay you real crypto for playing, or fitness apps that reward you for walking." },
                { t: "The Best Apps, Hand-Picked", b: "Skip the endless searching. We carefully curate and recommend the top-performing apps across gaming, finance, and lifestyle. Whether you want to earn rewards or just play, we bring the best of the digital economy right to you." },
              ].map((f, i) => (
                <div key={i} className="card">
                  <div className="feature-title">{f.t}</div>
                  <div className="feature-body">{f.b}</div>
                </div>
              ))}
            </div>
          </Reveal>

          <div style={{height: 64}}></div>

          <Reveal>
            <div className="numbered-h">
              <span className="n">2 //</span>
              <h3>For the Web3 Native: The Catalyst for Mass Adoption</h3>
            </div>
            <p style={{color:'var(--text-soft)', fontSize:14, maxWidth:720, marginBottom: 28}}>
              If we want to onboard the next billion users, we can't force Web3 protocols into Web2 boxes. Mass
              adoption requires specialized hardware and a dedicated distribution channel. Here is how the Schok
              Quantum Ultra solves the industry's biggest bottlenecks.
            </p>
            <div className="grid-3">
              {[
                { t: "The Trojan Horse UX", b: "Mass adoption doesn't happen when we force normies to write down 12 words. We fixed it by binding cryptographic keys directly to the device's trusted execution environment (TEE), we deliver hardware-wallet security combined with seamless Web2 convenience." },
                { t: "A Native Distribution Channel", b: "To reach global consumers seamlessly, developers need an environment built from the ground up for Web3. Terran provides the exact native infrastructure required for complex tokenized economies and agentic AI to flourish on-device." },
                { t: "Real-World DePIN & IoT Utility", b: "Web3 isn't just about trading anymore. With unmitigated access to the phone's NFC and Bluetooth APIs, the Schok Quantum Ultra enables true real-world utility—from tap to pay crypto interfaces, to flawless, immediate integration with DePIN hardware and IoT networks." },
              ].map((f, i) => (
                <div key={i} className="card card-accent">
                  <div className="feature-title" style={{color:'var(--accent)'}}>{f.t}</div>
                  <div className="feature-body">{f.b}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <div className="divider" id="device"></div>

      {/* Meet the device */}
      <section className="section">
        <div className="container">
          <div className="device-grid">
            <Reveal>
              <div className="device-frame">
                <PhoneSilhouette />
                <div style={{position:'absolute', bottom: 14, left:0, right:0, textAlign:'center', fontFamily:'var(--mono)', fontSize:10, color:'var(--text-muted)', letterSpacing:'0.12em'}}>
                  [ ABSTRACT RENDER OF SCHOK QUANTUM ULTRA ]
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <h2>Meet the Schok Quantum Ultra.</h2>
              <p style={{color:'var(--text-soft)', marginTop:12, fontSize:14}}>Flagship performance backed by Tier-1 telecom standards.</p>
              <p style={{color:'var(--text-soft)', marginTop:16, fontSize:13.5, lineHeight:1.7}}>
                We didn't reinvent the wheel; we partnered with the experts. Schok is a proven, high-volume hardware
                manufacturer trusted by the biggest networks in the world, including <b>T-Mobile</b>, <b>Verizon</b>, and <b>Boost Mobile</b>.
              </p>
              <p style={{color:'var(--text-soft)', marginTop:14, fontSize:13.5, lineHeight:1.7}}>
                The Schok Quantum Ultra delivers enterprise-grade reliability, providing the perfect physical foundation
                for Terran's Web3 operating system.
              </p>
              <div style={{marginTop: 28}}>
                <div className="eyebrow muted" style={{marginBottom:8}}>DEVICE SPECIFICATIONS</div>
                <div>
                  <div className="spec-row"><div className="spec-label">Display</div><div className="spec-value">[ e.g., 6.7" OLED ]</div></div>
                  <div className="spec-row"><div className="spec-label">Processor</div><div className="spec-value">[ e.g., Snapdragon 8 Gen 2 ]</div></div>
                  <div className="spec-row"><div className="spec-label">Memory</div><div className="spec-value">[ e.g., 12GB RAM / 512GB Storage ]</div></div>
                  <div className="spec-row"><div className="spec-label">Battery</div><div className="spec-value">[ e.g., 5000 mAh Fast Charge ]</div></div>
                  <div className="spec-row"><div className="spec-label">Security</div><div className="spec-value">Hardware TEE Isolation</div></div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <div className="divider" id="preorder"></div>

      {/* Reserve / Pre-order */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{textAlign:'center', maxWidth:640, margin:'0 auto 40px'}}>
              <h2>Reserve Your Device. Start Earning Today.</h2>
              <p className="lead" style={{margin:'14px auto 0'}}>
                Your pre-order does more than save your place in line. It immediately unlocks daily rewards.
              </p>
            </div>
          </Reveal>

          <Reveal>
            <div className="reserve-card">
              <div style={{fontSize:18, fontWeight:600}}>Early Access Pre-Order</div>
              <div className="price-row">
                <div className="price-block">
                  <div className="price-eyebrow">DUE TODAY</div>
                  <div className="price-amount">${tweaks.depositAmount}<span className="unit">USDC</span></div>
                </div>
                <div className="plus">+</div>
                <div className="price-pill">
                  <div className="price-eyebrow">IMMEDIATE BONUS</div>
                  <div className="price-amount" style={{color:'var(--accent)', fontSize:28}}>{tweaks.bonusMult}×<span className="unit" style={{color:'var(--accent)'}}>Points</span></div>
                </div>
              </div>
              <p style={{color:'var(--text-soft)', fontSize:13.5, lineHeight:1.7, maxWidth:540, margin:'0 auto'}}>
                Unlike a standard pre-order where your money just sits there, your $100 deposit goes to work
                immediately. While the rest of the world waits for the public launch, securing your Schok Quantum
                Ultra today locks in our highest 3x early-adopter reward rate. You will automatically earn Terran
                Points every single hour you wait for your phone to ship.
              </p>
              <div className="retail-strip">
                <b>Total Retail Price: ${tweaks.retailPrice}</b>
                <div style={{marginTop:6, fontSize:12.5}}>
                  Your $100 deposit secures your Schok Quantum Ultra and activates your daily rewards.
                  The remaining ${tweaks.retailPrice - 100} balance is only due when your hardware is ready to ship.
                </div>
              </div>
            </div>
          </Reveal>

          {/* Early adopter timeline */}
          <Reveal>
            <div className="panel" style={{marginTop: 28}}>
              <div className="panel-h">
                <div>
                  <div className="panel-title">Early Adopter Timeline</div>
                  <div className="panel-sub">The earlier you reserve, the faster you earn. Secure your device before the public launch to lock in a permanent multiplier.</div>
                </div>
              </div>
              <div className="panel-body">
                <div className="phase-grid">
                  {window.MOCK_DATA.phases.map((p) => (
                    <div key={p.id} className={cx("phase-card", p.status === 'active' ? 'active' : 'dim')}>
                      {p.status === 'active' && <div className="badge">ACTIVE</div>}
                      <div className={cx("phase-name", p.status === 'active' && 'active')}>{p.name}</div>
                      <div className="phase-meta">{p.range}</div>
                      <div className="phase-reward">{p.note}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>

          {/* Multipliers */}
          <Reveal>
            <div className="panel" style={{marginTop: 16}}>
              <div className="panel-h">
                <div>
                  <div className="panel-title">Multiply Your Daily Rewards</div>
                  <div className="panel-sub">Generate your unique referral link, invite others to reserve their Schok Quantum Ultra, and automatically stack these multipliers on top of your daily earning rate.</div>
                </div>
              </div>
              <div className="panel-body">
                <div className="mult-grid">
                  {window.MOCK_DATA.multipliers.map((m, i) => (
                    <div key={i} className={cx("mult-cell", m.peak && 'peak')}>
                      <div className="mult-value">{m.value}</div>
                      <div className="mult-label">{m.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal>
            <div style={{textAlign:'center', marginTop: 36}}>
              <button className="btn btn-primary btn-lg" onClick={onConnect}>
                Connect Wallet to Deposit $100 USDC
              </button>
            </div>
          </Reveal>
        </div>
      </section>

      <div className="divider" id="builders"></div>

      {/* Stop building */}
      <section className="section-dark">
        <div className="container">
          <Reveal>
            <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 40px'}}>
              <div className="eyebrow muted">FOR FOUNDERS & APP BUILDERS</div>
              <h2 style={{marginTop:14}}>Stop Building for Crypto Insiders.</h2>
              <h2>Build the Next Consumer Giant.</h2>
              <p className="lead" style={{margin:'18px auto 0'}}>
                Consumers don't care about blockchains. They just want apps that work. Launch your
                decentralized app in the Terran App Market and distribute directly to consumers with a seamless,
                native pipeline.
              </p>
            </div>
          </Reveal>

          <Reveal>
            <div style={{maxWidth:720, margin:'40px auto 0', color:'var(--text-soft)', fontSize:13.5, lineHeight:1.7}}>
              <p style={{marginBottom:14}}>
                To make Web3 truly mainstream, the technology must become invisible. But right now, you are stuck.
                You are forced to build clunky web extensions with zero hardware access, because standard operating
                systems simply aren't engineered to support complex Web3 mechanics natively.
              </p>
              <p>
                Terran is the solution. We provide a native environment by embedding the <b>Terran App Market</b> directly
                into partner mobile devices—starting with the Schok Quantum Ultra. We actively curate, audit, and
                recommend the best Web3 applications right to the consumer's home screen. Under the hood, our
                WebAssembly (WASM) runtime lets you write in the languages you already know (Rust, Go, C++). To
                the consumer, it's a premium, one-click download. To you, it's absolute creative freedom and direct
                access to a massive audience.
              </p>
            </div>
          </Reveal>

          <Reveal>
            <div style={{maxWidth:720, margin:'40px auto 0'}}>
              <h3 style={{fontSize:20}}>Spark the Next Economy of Projects.</h3>
              <p style={{color:'var(--text-soft)', fontSize:13.5, marginTop:12, lineHeight:1.7}}>
                We provide the infrastructure; you build the killer apps. Terran doesn't compete with developers—we
                empower them. Here are just a few examples of the billion-dollar use cases your project can build on
                Terran that are currently impossible on standard mobile operating systems:
              </p>
              <div className="use-cases">
                {[
                  { t: "GameFi: Revive Classic Games with Web3 Tournaments", b: "Standard app stores crush real-money gaming with 30% taxes and anti-crypto policies. On Terran, the guardrails are off. Imagine building a skill-based, crypto-native tournament platform to breathe new life into plateaued Web2 games. Ten players pay a $1 USDC entry fee for a timed puzzle match. The winner instantly takes the pot via a smart contract, your platform takes a micro-fee, and you avoid the Big Tech tax entirely." },
                  { t: "DePIN & Utility: Unrestricted Hardware Access", b: "Standard mobile browsers block Web3 apps from deep hardware integration. Terran gives your project unmitigated, system-level access to the Schok Quantum Ultra's NFC and Bluetooth APIs. Build a true tap-to-Pay crypto wallet where users settle in USDC by tapping a checkout counter. Or, create a DePIN app that seamlessly connects to external IoT hardware via Bluetooth, authenticating data in the background without clunky workarounds." },
                  { t: "Agentic AI & DeFi: Secure, Autonomous Finance", b: "The future is AI acting on our behalf, but giving a cloud-based AI access to a crypto wallet is a massive security risk. Because Terran leverages the device's hardware Trusted Execution Environment (TEE), you can build secure, on-device AI agents. Imagine building an autonomous trading assistant that monitors a user's DeFi portfolio and automatically executes trades—the private keys never leave the phone's isolated hardware chip." },
                ].map((uc, i) => (
                  <div key={i} className="use-case">
                    <div className="uc-title">{uc.t}</div>
                    <div className="uc-body">{uc.b}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <footer className="footer">
        <div className="container">
          <div className="footer-row">
            <div className="brand"><span className="brand-mark"></span><span>Terran</span></div>
            <div className="mono">© 2026 — Native crypto, native hardware.</div>
          </div>
        </div>
      </footer>
    </>
  );
}

window.Landing = Landing;