/* TekRevive — Shared product landing page (React) */
/* Reads window.__MODEL set by the host HTML page. */

const M = window.__MODEL;
const CONDITIONS = [
  { id: 'flawless', label: 'Flawless', desc: 'No marks. Mint screen & body.', tone: '#16a34a' },
  { id: 'good',     label: 'Good',     desc: 'Minor wear. No cracks.',         tone: '#2563eb' },
  { id: 'fair',     label: 'Fair',     desc: 'Visible wear. Fully working.',   tone: '#d97706' },
  { id: 'faulty',   label: 'Faulty',   desc: 'Cracked / not working.',         tone: '#dc2626' },
];

function fmt(n) { return '$' + n.toLocaleString('en-AU'); }

function Breadcrumbs() {
  return (
    <nav className="bc" aria-label="Breadcrumb">
      <a href="TekRevive.html">Home</a>
      <span className="bc-sep">›</span>
      <a href="Sell iPhone.html">Sell iPhone</a>
      <span className="bc-sep">›</span>
      <span className="bc-current">{M.name}</span>
    </nav>
  );
}

function Hero() {
  const max = window.maxPrice(M);
  return (
    <section className="prod-hero">
      <div className="prod-hero-inner">
        <div className="prod-hero-left">
          <Breadcrumbs />
          <div className="eyebrow eyebrow-light">{M.brand} · Released {M.released}</div>
          <h1 className="prod-h1">Sell your {M.name} <em>for up to {fmt(max)}</em></h1>
          <p className="prod-sub">Instant quote. Free Australia-wide shipping. Bank transfer in 3–5 days. Even cracked or dead {M.shortName} models get a fair price.</p>
          <div className="prod-hero-cta">
            <a href={`Sell Your Phone.html?model=${M.slug}`} className="btn-cta btn-cta-lg">Get My Quote →</a>
            <a href="#prices" className="btn-ghost-light">See All Prices</a>
          </div>
          <ul className="prod-hero-trust">
            <li>✓ Price-beat guarantee</li>
            <li>✓ Free prepaid satchel</li>
            <li>✓ Paid in 3–5 business days</li>
          </ul>
        </div>
        <div className="prod-hero-right">
          <PhoneRender />
          <div className="prod-hero-card">
            <div className="prod-card-row">
              <span>Top condition · {M.storages[M.storages.length - 1]}</span>
              <strong>{fmt(max)}</strong>
            </div>
            <div className="prod-card-row">
              <span>Faulty · {M.storages[0]}</span>
              <strong>{fmt(M.prices[M.storages[0]].faulty)}</strong>
            </div>
            <div className="prod-card-foot">Updated {new Date().toLocaleDateString('en-AU', { day:'numeric', month:'short', year:'numeric' })}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PhoneRender() {
  // CSS / SVG rendering of an iPhone (Pro Max-style notch / dynamic island)
  return (
    <div className="phone-render">
      <svg viewBox="0 0 220 440" xmlns="http://www.w3.org/2000/svg" style={{ width:'100%', maxWidth:'260px', display:'block', margin:'0 auto' }}>
        <defs>
          <linearGradient id="phBody" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#3a3a3c"/>
            <stop offset="100%" stopColor="#1a1a1c"/>
          </linearGradient>
          <linearGradient id="phScreen" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#263D89"/>
            <stop offset="100%" stopColor="#0d1640"/>
          </linearGradient>
        </defs>
        <rect x="6" y="6" width="208" height="428" rx="36" fill="url(#phBody)" stroke="#0a0a0c" strokeWidth="1.5"/>
        <rect x="14" y="14" width="192" height="412" rx="30" fill="url(#phScreen)"/>
        <rect x="78" y="22" width="64" height="22" rx="11" fill="#0a0a0c"/>
        <circle cx="128" cy="33" r="3" fill="#1a1a1c"/>
        <text x="110" y="200" textAnchor="middle" fill="rgba(254,194,14,.95)" fontSize="14" fontWeight="800" fontFamily="Inter,sans-serif">{M.shortName}</text>
        <text x="110" y="220" textAnchor="middle" fill="rgba(255,255,255,.6)" fontSize="9" fontWeight="600" fontFamily="Inter,sans-serif">{M.brand.toUpperCase()}</text>
      </svg>
    </div>
  );
}

function PriceMatrix() {
  const max = window.maxPrice(M);
  return (
    <section className="sec" id="prices">
      <div className="sec-inner">
        <div className="eyebrow">Live Prices · Updated daily</div>
        <h2 className="sec-title">How much is your {M.name} worth?</h2>
        <p className="sec-desc" style={{ maxWidth:'640px', marginBottom:'32px' }}>Pick your storage and condition. Prices reflect current Australian buyback market rates as of today. Lock yours in within 14 days.</p>

        <div className="price-matrix-wrap">
          <table className="price-matrix">
            <thead>
              <tr>
                <th>Storage</th>
                {CONDITIONS.map(c => (
                  <th key={c.id}>
                    <span className="mat-cond-dot" style={{ background: c.tone }}></span>
                    {c.label}
                  </th>
                ))}
                <th>Best price</th>
              </tr>
            </thead>
            <tbody>
              {M.storages.map(s => (
                <tr key={s}>
                  <td className="mat-storage">{s}</td>
                  {CONDITIONS.map(c => (
                    <td key={c.id} className={M.prices[s][c.id] === max ? 'mat-cell mat-best' : 'mat-cell'}>{fmt(M.prices[s][c.id])}</td>
                  ))}
                  <td className="mat-best-col">{fmt(Math.max(...CONDITIONS.map(c => M.prices[s][c.id])))}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="mat-legend">
          {CONDITIONS.map(c => (
            <div key={c.id} className="mat-legend-item">
              <span className="mat-cond-dot" style={{ background: c.tone }}></span>
              <strong>{c.label}</strong> <span>· {c.desc}</span>
            </div>
          ))}
        </div>

        <div className="mat-cta-row">
          <a href={`Sell Your Phone.html?model=${M.slug}`} className="btn-cta btn-cta-lg">Lock In My Price →</a>
          <span className="mat-cta-note">Price held 14 days from quote.</span>
        </div>
      </div>
    </section>
  );
}

function Whyband() {
  const items = [
    { t: 'Highest price, guaranteed', d: `We pay $200–$500 more than Mobile Monster, Asurion and Apple on a flagship ${M.shortName}. Find a higher offer? We\'ll beat it by 5%.` },
    { t: 'Free prepaid shipping',     d: 'Australia Post satchel emailed within 60 seconds of accepting your quote. Drop off at any post office.' },
    { t: 'Paid in 3–5 business days', d: 'Bank transfer or PayPal the same day we inspect. No 30-day waits like eBay or Facebook Marketplace.' },
    { t: 'Inspection on camera',      d: 'Every device filmed during inspection. Watch the recording before accepting the final offer. Zero lowball surprises.' },
  ];
  return (
    <section className="sec sec-alt">
      <div className="sec-inner">
        <div className="eyebrow">Why TekRevive</div>
        <h2 className="sec-title">Four reasons sellers pick us</h2>
        <div className="why-grid-4">
          {items.map((x,i) => (
            <div key={i} className="why-card">
              <div className="why-num">0{i+1}</div>
              <h3 className="why-card-t">{x.t}</h3>
              <p className="why-card-d">{x.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { t: 'Get instant quote', d: `Select your ${M.shortName}, storage and condition. See your price in 30 seconds — no email or signup needed.` },
    { t: 'Ship for free',     d: 'Prepaid Australia Post satchel emailed instantly. Drop your device at any post office, anywhere in Australia.' },
    { t: 'Get paid fast',     d: 'We inspect within 24hrs of arrival. Bank transfer or PayPal within 3–5 business days. Done.' },
  ];
  return (
    <section className="sec" id="how">
      <div className="sec-inner">
        <div className="eyebrow">How it works</div>
        <h2 className="sec-title">Three steps. No surprises.</h2>
        <div className="how-3">
          {steps.map((s,i) => (
            <div key={i} className="how-card">
              <div className="how-big-num">{i+1}</div>
              <h3 className="how-card-t">{s.t}</h3>
              <p className="how-card-d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Comparison() {
  const max = Math.max(...M.competitors.map(c => c.price));
  return (
    <section className="sec sec-alt" id="compare">
      <div className="sec-inner">
        <div className="eyebrow">Price comparison</div>
        <h2 className="sec-title">{M.name} · {M.storages[M.storages.length-1]} · Flawless</h2>
        <p className="sec-desc" style={{ maxWidth:'620px', marginBottom:'28px' }}>How TekRevive stacks up against other Australian buyback services for the top-spec {M.shortName}. Prices verified within the last 30 days.</p>
        <div className="cmp-list">
          {M.competitors.map((c,i) => (
            <div key={i} className={c.us ? 'cmp-row cmp-row-us' : 'cmp-row'}>
              <div className="cmp-name">{c.name}{c.us && <span className="cmp-badge">You're here</span>}</div>
              <div className="cmp-bar-wrap">
                <div className="cmp-bar" style={{ width: `${(c.price/max)*100}%`, background: c.us ? 'var(--yellow)' : 'rgba(38,61,137,.22)' }}></div>
              </div>
              <div className="cmp-price">{fmt(c.price)}</div>
            </div>
          ))}
        </div>
        <p className="cmp-note">Competitor prices sourced from public quote tools, {new Date().toLocaleDateString('en-AU', { month:'long', year:'numeric' })}. Your offer may vary based on condition.</p>
      </div>
    </section>
  );
}

function Accept() {
  return (
    <section className="sec" id="accept">
      <div className="sec-inner">
        <div className="accept-layout">
          <div>
            <div className="eyebrow">What we accept</div>
            <h2 className="sec-title">Even broken {M.shortName} models get a fair price</h2>
            <p className="sec-desc" style={{ marginBottom:'24px' }}>Parts value stays high on flagship Pro Max devices. Cracked screen? Won't turn on? Water damaged? We still pay good money.</p>
            <a href={`Sell Your Phone.html?model=${M.slug}`} className="btn-cta">Get My Quote →</a>
          </div>
          <div className="accept-grid">
            {M.accept.map((x,i) => (
              <div key={i} className="accept-pill">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 7" stroke="#16a34a" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                <span>{x}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Specs() {
  return (
    <section className="sec sec-alt" id="specs">
      <div className="sec-inner">
        <div className="eyebrow">About this model</div>
        <h2 className="sec-title">{M.name} at a glance</h2>
        <p className="sec-desc" style={{ maxWidth:'620px', marginBottom:'28px' }}>The {M.name} launched in {M.released} as the {M.brand} flagship of {M.releaseYear}. Available in {M.colors.length} finishes and {M.storages.length} storage options.</p>
        <div className="specs-layout">
          <div className="specs-table">
            {M.specs.map(([k,v]) => (
              <div key={k} className="specs-row">
                <div className="specs-k">{k}</div>
                <div className="specs-v">{v}</div>
              </div>
            ))}
            <div className="specs-row">
              <div className="specs-k">Storage</div>
              <div className="specs-v">{M.storages.join(' · ')}</div>
            </div>
            <div className="specs-row">
              <div className="specs-k">Colours</div>
              <div className="specs-v">{M.colors.join(', ')}</div>
            </div>
          </div>
          <div className="specs-tip">
            <h3>Selling tip</h3>
            <p>{M.shortName} prices drop 15–25% within 60 days of the next Apple keynote. If you're upgrading, sell <strong>before</strong> the announcement to maximise value.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Related() {
  const others = M.related
    .filter(slug => window.MODELS[slug])
    .map(slug => window.MODELS[slug]);
  if (!others.length) return null;
  return (
    <section className="sec" id="related">
      <div className="sec-inner">
        <div className="eyebrow">Related models</div>
        <h2 className="sec-title">Selling something else?</h2>
        <div className="related-grid">
          {others.map(o => (
            <a key={o.slug} href={`Sell ${o.name}.html`} className="related-card">
              <div className="related-name">{o.name}</div>
              <div className="related-price">Up to {fmt(window.maxPrice(o))}</div>
              <div className="related-cta">View prices →</div>
            </a>
          ))}
          <a href="Sell iPhone.html" className="related-card related-card-hub">
            <div className="related-name">All iPhone models</div>
            <div className="related-price">iPhone 11 → 17 Pro Max</div>
            <div className="related-cta">Browse hub →</div>
          </a>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="sec sec-alt" id="faq">
      <div className="sec-inner">
        <div className="eyebrow">FAQs</div>
        <h2 className="sec-title">{M.name} — your questions answered</h2>
        <div className="faq-list">
          {M.faq.map((item, i) => (
            <div key={i} className={open === i ? 'faq-item faq-open' : 'faq-item'}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ transform: open === i ? 'rotate(180deg)' : 'none', transition:'transform .2s' }}>
                  <path d="M6 9l6 6 6-6" stroke="#1F252D" strokeWidth="2" strokeLinecap="round"/>
                </svg>
              </button>
              {open === i && <div className="faq-a">{item.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StickyBar() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const on = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', on, { passive:true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  if (!show) return null;
  const max = window.maxPrice(M);
  return (
    <div className="sticky-cta">
      <div className="sticky-cta-inner">
        <div className="sticky-cta-l">
          <div className="sticky-cta-name">{M.name}</div>
          <div className="sticky-cta-price">Up to <strong>{fmt(max)}</strong></div>
        </div>
        <a href={`Sell Your Phone.html?model=${M.slug}`} className="btn-cta">Get My Quote →</a>
      </div>
    </div>
  );
}

function CTAFinal() {
  return (
    <section className="prod-cta">
      <div className="prod-cta-inner">
        <div className="eyebrow eyebrow-light">Ready when you are</div>
        <h2 className="prod-cta-title">Turn your {M.name} into cash <em>today</em></h2>
        <p className="prod-cta-sub">Instant quote · Free shipping · Paid in 3–5 days</p>
        <a href={`Sell Your Phone.html?model=${M.slug}`} className="btn-cta btn-cta-lg">Get My Quote →</a>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Hero />
      <PriceMatrix />
      <Whyband />
      <HowItWorks />
      <Comparison />
      <Accept />
      <Specs />
      <Related />
      <FAQ />
      <CTAFinal />
      <StickyBar />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);