// ─── Public Website Pages ──────────────────────────────────────────

const Public = {
  async home(app) {
    const res = await app.api('services/featured');
    const plans = res.success && res.data ? res.data : [];

    app.$content.innerHTML = `
      <section class="hero">
        <h1>Cheap & Reliable Web Hosting</h1>
        <p>Starting at just $0.25/mo — 99.9% uptime, cPanel, free SSL, and 24/7 support.</p>
        <a href="#hosting" data-nav="hosting" class="btn btn-primary btn-lg">View Plans</a>
      </section>
      
      <section class="section">
        <h2 class="section-title">Why Host25Cent?</h2>
        <div class="features-grid">
          <div class="feature-card">
            <i class="fas fa-rocket"></i>
            <h3>100% SSD Powered</h3>
            <p>Enterprise SSD storage for lightning-fast performance.</p>
          </div>
          <div class="feature-card">
            <i class="fas fa-shield-alt"></i>
            <h3>Free DDoS Protection</h3>
            <p>1,000 Gbps DDoS protection on all plans.</p>
          </div>
          <div class="feature-card">
            <i class="fas fa-infinity"></i>
            <h3>Unlimited Features</h3>
            <p>Unlimited bandwidth, databases, and email accounts.</p>
          </div>
          <div class="feature-card">
            <i class="fas fa-headset"></i>
            <h3>24/7 Support</h3>
            <p>Expert support via tickets, chat, and WhatsApp.</p>
          </div>
        </div>
      </section>

      <section class="section" style="background:var(--gray-100);padding:4rem 2rem;max-width:100%">
        <div style="max-width:1200px;margin:0 auto">
          <h2 class="section-title">Featured Plans</h2>
          <div class="pricing-grid">
            ${plans.map(p => `
              <div class="pricing-card">
                <div class="pricing-name">${app.escape(p.name)}</div>
                <div class="pricing-icon"><img src="img/server1.svg" alt=""></div>
                <div class="pricing-price">
                  <div class="amount">$${p.price}</div>
                  <div class="period">/mo — $${p.yprice}/yr</div>
                </div>
                <ul class="pricing-features">
                  <li>${p.space} ${p.is_nvme ? 'NVMe' : 'SSD'} Disk</li>
                  <li>${p.band} Bandwidth</li>
                  <li>Unlimited Addon Domains</li>
                  <li>cPanel Control Panel</li>
                  <li>Free SSL Certificate</li>
                </ul>
                ${app.state.user ? `<a href="#" class="btn btn-primary btn-block" onclick="Checkout.start(${p.id}); return false;">Order Now</a>` : `<a href="#hosting" data-nav="hosting" class="btn btn-primary btn-block">Order Now</a>`}
              </div>
            `).join('')}
          </div>
        </div>
      </section>
    `;
  },

  async hosting(app) {
    const res = await app.api('services/packages');
    const plans = res.success && res.data ? res.data : [];

    app.$content.innerHTML = `
      <section style="background:var(--dark);color:#fff;padding:3rem 2rem;text-align:center">
        <h1 style="font-size:2rem;font-weight:700;">Web Hosting Plans</h1>
        <p>Choose the perfect plan for your website</p>
      </section>
      <section class="section">
        <div style="margin-bottom:1.5rem;display:flex;gap:1rem;justify-content:center">
          <button class="btn btn-primary" onclick="Public.filterPlans('Hosting')">SSD Hosting</button>
          <button class="btn btn-secondary" onclick="Public.filterPlans('nvme')">NVMe Hosting</button>
          <button class="btn btn-secondary" onclick="Public.filterPlans('Reseller')">Reseller</button>
          <button class="btn btn-secondary" onclick="Public.filterPlans('vps')">VPS</button>
        </div>
        <div class="pricing-grid" id="plans-grid">
          ${plans.map(p => `
            <div class="pricing-card">
              <div class="pricing-name">${app.escape(p.name)}</div>
              <div class="pricing-icon"><img src="img/server1.svg" alt=""></div>
              <div class="pricing-features">
                <li><strong>${p.space}</strong> Disk Space</li>
                <li><strong>${p.band}</strong> Bandwidth</li>
                <li><strong>Unlimited</strong> Addon Domains</li>
                <li><strong>cPanel</strong> Control Panel</li>
              </div>
              <div class="pricing-price">
                <div class="amount">$${p.price}</div>
                <div class="period">/mo</div>
              </div>
              ${app.state.user ? `<a href="#" class="btn btn-primary btn-block" onclick="Checkout.start(${p.id}); return false;">Order Now</a>` : `<a href="#register" data-nav="register" class="btn btn-primary btn-block">Get Started</a>`}
            </div>
          `).join('')}
        </div>
      </section>
    `;
  },

  async filterPlans(type) {
    const app = App;
    const res = await app.api(`services/packages&type=${type}`);
    const plans = res.success && res.data ? res.data : [];
    const grid = document.getElementById('plans-grid');
    if (!grid) return;

    grid.innerHTML = plans.map(p => `
      <div class="pricing-card">
        <div class="pricing-name">${app.escape(p.name)}</div>
        <div class="pricing-features">
          <li><strong>${p.space}</strong> Disk Space</li>
          <li><strong>${p.band}</strong> Bandwidth</li>
          <li><strong>Unlimited</strong> Addon Domains</li>
          <li><strong>cPanel</strong> Control Panel</li>
        </div>
        <div class="pricing-price">
          <div class="amount">$${p.price}</div>
          <div class="period">/mo</div>
        </div>
        ${app.state.user ? `<a href="#" class="btn btn-primary btn-block" onclick="Checkout.start(${p.id}); return false;">Order Now</a>` : `<a href="#register" data-nav="register" class="btn btn-primary btn-block">Get Started</a>`}
      </div>
    `).join('');
  },

  async knowledge(app) {
    const faqs = [
      { q: 'Default Nameservers', a: 'Our default nameservers are ns1.host25cent.com and ns2.host25cent.com.' },
      { q: 'Setting up Email Clients', a: 'Use IMAP/SMTP with server mail.yourdomain.com (SSL ports 993/465).' },
      { q: 'Do you offer SSH access?', a: 'Yes, upon request via support ticket after identity verification.' },
      { q: 'How to Install WordPress', a: 'Use Softaculous in cPanel for 1-click WordPress installation.' },
      { q: 'How do I stop automatic renewal?', a: 'Log in to your PayPal account and cancel the active subscription.' }
    ];

    app.$content.innerHTML = `
      <section style="background:var(--dark);color:#fff;padding:3rem 2rem;text-align:center">
        <h1 style="font-size:2rem;font-weight:700;">Knowledgebase</h1>
        <p>Common questions and answers</p>
      </section>
      <section class="section">
        <div class="card">
          <div class="card-body">
            ${faqs.map((f, i) => `
              <div style="padding:1rem 0;border-bottom:1px solid var(--gray-200)">
                <div style="font-weight:600;cursor:pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">${f.q}</div>
                <div class="hidden" style="margin-top:.5rem;color:var(--gray-500)">${f.a}</div>
              </div>
            `).join('')}
          </div>
        </div>
      </section>
    `;
  },

  async status(app) {
    app.$content.innerHTML = `
      <section style="background:var(--dark);color:#fff;padding:3rem 2rem;text-align:center">
        <h1 style="font-size:2rem;font-weight:700;">Network Status</h1>
        <p>Uptime: <span id="uptime-value">Checking...</span></p>
      </section>
      <section class="section">
        <div class="card"><div class="card-body">
          <p>For full incident history and per-server status, visit our <a href="https://stats.uptimerobot.com/KzDXWsqkNr" target="_blank" rel="noopener">public status page</a>.</p>
        </div></div>
      </section>
    `;

    const res = await app.api('uptime');
    const el = document.getElementById('uptime-value');
    if (el) el.textContent = res.success && res.data ? res.data.uptime : 'Unavailable';
  },

  async contact(app) {
    app.$content.innerHTML = `
      <section style="background:var(--dark);color:#fff;padding:3rem 2rem;text-align:center">
        <h1 style="font-size:2rem;font-weight:700;">Contact Us</h1>
        <p>We're here to help</p>
      </section>
      <section class="section">
        <div class="row">
          <div class="col-6">
            <div class="card">
              <div class="card-header"><h3>Send a Message</h3></div>
              <div class="card-body">
                <div id="contact-message"></div>
                <form id="contact-form">
                  <div class="form-group"><input type="text" name="name" class="form-control" placeholder="Your Name" required></div>
                  <div class="form-group"><input type="email" name="email" class="form-control" placeholder="Your Email" required></div>
                  <div class="form-group"><textarea name="msg" class="form-control" placeholder="Your Message" rows="5" required></textarea></div>
                  <button type="submit" class="btn btn-primary">Send Message</button>
                </form>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="card">
              <div class="card-header"><h3>Contact Information</h3></div>
              <div class="card-body">
                <p><strong>Address:</strong> Gentle Cir, Gaithersburg, MD 20886, USA</p>
                <p><strong>Phone:</strong> +1 401 402 0325</p>
                <p><strong>Email:</strong> sales@host25cent.com</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    `;

    document.getElementById('contact-form').onsubmit = async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const data = {};
      fd.forEach((v, k) => data[k] = v);
      const r = await app.api('contact', 'POST', data);
      document.getElementById('contact-message').innerHTML = r.success
        ? '<div class="alert alert-success">Message sent!</div>'
        : '<div class="alert alert-danger">Failed to send.</div>';
    };
  }
};