<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>SkyCore JetPack - FutureTech Corp.</title>
  <link rel="icon" href="../icons/logo-icon.png">
  <link rel="stylesheet" href="../styles/header-footer.css"> 
  <link rel="stylesheet" href="../styles/general-body.css">   
  <link rel="stylesheet" href="../styles/details.css">   
</head>
<body>
  <%- include('../partials/header') %>

  <main>
    <section class="product-detail">
      <h2><%= prod.name %></h2>
      <div style="text-align: center;">
        <img src="../images/large/<%= prod.image %>" alt="<%= prod.imageAlt %>" />
      </div>
      <p>
        <%- prod.par1 %>
      </p>
      <p>
        <%- prod.par2 %>
      </p>

      <h3>Key Features:</h3>
      <ul>
         <% prod.features.forEach(f => { %>
            <li>
                <%= f.feature %>: <%= f.desc %>
            </li>
        <% }); %>
      </ul>

      <h3>Specifications:</h3>
      <table class="specs-table">
        <tbody>
            <% prod.specs.forEach(s => { %>
                <tr><th><%= s.key %></th><td><%= s.value %></td></tr>
            <% }); %>
        </tbody>
      </table>

      <h3>Pricing:</h3>
      <table class="pricing-table">
        <thead>
          <tr><th>Package</th><th>Price (USD)</th><th>Includes</th></tr>
        </thead>
        <tbody>
            <% prod.pricing.forEach(pr => { %>
                <tr><td><%= pr.option %></td><td>$<%= pr.price.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) %></td><td><%= pr.includes %></td></tr>
            <% }); %>
        </tbody>
      </table>

      <h3>Optional Accessories:</h3>
      <ul>
            <% prod.accessories.forEach(a => { %>
                <li><%= a.option %> — $<%= a.price.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) %></li>
            <% }); %>
      </ul>

      <button class="buy-button">Buy Now</button>
    </section>
  </main>

  <%- include('../partials/footer') %>
</body>
</html>