# -*- coding: utf-8 -*-
from build import page, WHATSAPP_NUMBER

HOW_BODY = """
<section class="page-hero">
  <div class="container">
    <div class="breadcrumb"><a href="index.html">Home</a> / How It Works</div>
    <span class="eyebrow">The workflow</span>
    <h1>Five roles, one server-enforced process</h1>
    <p class="lede">Every stage below is backed by a permission-checked step in our system — a Property Manager cannot skip to inspection without Admin assignment, and an Owner only ever sees photos and videos that have actually been approved.</p>
  </div>
</section>

<section>
  <div class="container">
    <h2 class="sr-only">The 9-step workflow</h2>
    <div class="timeline">
      <div class="timeline-item"><span class="role-tag">Step 1 · Property Owner</span><h3>Register your property</h3><p>Add property name, type, full address, GPS pin, size, description, preferred visit date/time, supporting documents and initial photos. Status starts as "Pending Admin Review."</p></div>
      <div class="timeline-item"><span class="role-tag">Step 2 · Admin</span><h3>Review &amp; assign a Property Manager</h3><p>Our Admin team verifies the submitted details and documents, then assigns your property to a regional Property Manager with priority and any special instructions.</p></div>
      <div class="timeline-item"><span class="role-tag">Step 3 · Property Manager</span><h3>Schedule the inspection</h3><p>Your Manager reviews the property and schedules a site visit, assigning a Property Executive — capped so no Executive is over-booked on a given day.</p></div>
      <div class="timeline-item"><span class="role-tag">Step 4 · Property Executive</span><h3>Visit &amp; capture verified evidence</h3><p>GPS location is captured before the Executive can even mark "Reached." Photos and videos are stamped with date/time, GPS coordinates and address, then uploaded directly to secure storage.</p></div>
      <div class="timeline-item"><span class="role-tag">Step 5 · Property Executive</span><h3>Complete the checklist &amp; submit</h3><p>Condition checklist, notes and observations are reviewed by the Executive and digitally signed before submission — the checklist itself becomes part of the tamper-evident record.</p></div>
      <div class="timeline-item"><span class="role-tag">Step 6 · Property Manager</span><h3>Approve, reject, or request a re-visit</h3><p>Your Manager reviews every photo and video individually. Only approved media is ever visible to you — pending or rejected items are never shown.</p></div>
      <div class="timeline-item"><span class="role-tag">Step 7 · Automatic</span><h3>Report generated &amp; pushed live</h3><p>The moment your Manager approves, your Property Inspection Report is generated automatically and appears on your dashboard — no manual download request needed.</p></div>
      <div class="timeline-item"><span class="role-tag">Step 8 · Property Owner</span><h3>Log in &amp; review, anywhere</h3><p>Open your dashboard from any device to see the status timeline, approved photos and videos, the report, your invoice — updated in real time as each step happens.</p></div>
      <div class="timeline-item"><span class="role-tag">Recurring</span><h3>Next visit auto-scheduled</h3><p>Roughly every 15 days after a completed visit, the next one is scheduled automatically — about two visits a month, so your property is never left unchecked for long.</p></div>
    </div>
  </div>
</section>

<section class="section-tint">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Who does what</span>
      <h2>The team behind every inspection</h2>
    </div>
    <div class="grid grid-4">
      <div class="card"><div class="icon-badge">🛡️</div><h3>Admin</h3><p class="mb-0">Reviews new registrations, verifies documents, and assigns properties to the right regional Manager.</p></div>
      <div class="card"><div class="icon-badge">🧑‍💼</div><h3>Property Manager</h3><p class="mb-0">Owns your property's ongoing relationship — schedules visits, reviews evidence, replies to your support tickets.</p></div>
      <div class="card"><div class="icon-badge">🚶</div><h3>Property Executive</h3><p class="mb-0">Physically visits the site, captures GPS-verified evidence and completes the inspection checklist.</p></div>
      <div class="card"><div class="icon-badge">🏠</div><h3>You, the Owner</h3><p class="mb-0">Register, track, review and download — from the mobile app or this web portal, kept in sync in real time.</p></div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="cta-band">
      <h2>See it running on your own property</h2>
      <p>Registration takes about five minutes. Most properties get their first scheduled visit within a week.</p>
      <a href="portal/index.html#register" class="btn btn-navy">Register Your Property</a>
    </div>
  </div>
</section>
"""

page(
    "how-it-works.html",
    "How It Works — The NRI Property Guard Verification Workflow",
    "See exactly how a property moves from registration through Admin review, Manager assignment, on-site inspection and a tamper-evident report on your dashboard.",
    "how-it-works.html",
    HOW_BODY,
)

PRICING_BODY = """
<section class="page-hero">
  <div class="container">
    <div class="breadcrumb"><a href="index.html">Home</a> / Pricing</div>
    <span class="eyebrow">Simple, transparent pricing</span>
    <h1>Priced per property, by how often we visit. No hidden verification fees.</h1>
    <p class="lede">Most competitors charge Rs 15,000–40,000 for a single one-time legal opinion. We charge a flat, published monthly rate for recurring, verified inspection and management — because "peace of mind" shouldn't need a quote request. Owners with more than 2 properties automatically get a lower per-property rate.</p>
  </div>
</section>

<section>
  <div class="container">
    <h2 class="sr-only">Plan options</h2>
    <div class="pricing-grid">
      <div class="price-card">
        <h3>Regular — 1 visit/month</h3>
        <p style="color:var(--ink-500);">One verified on-site inspection every month.</p>
        <div class="price-amount">₹2,000 <span>/ property / month</span></div>
        <p style="font-size:.82rem;color:var(--teal-700);font-weight:600;margin-top:-8px;">₹1,500 / property / month if you register more than 2 properties</p>
        <ul class="price-list">
          <li>✅ 1 recurring on-site inspection visit/month</li>
          <li>✅ GPS-tagged, timestamped photo &amp; video evidence</li>
          <li>✅ Tamper-evident Property Inspection Report (PDF)</li>
          <li>✅ Real-time web &amp; mobile owner dashboard</li>
          <li>✅ Document vault &amp; auto-generated invoices</li>
          <li>✅ Support ticket desk with your Property Manager</li>
          <li>✅ Nearby Locations &amp; market indicators</li>
        </ul>
        <a href="portal/index.html#register" class="btn btn-outline-navy btn-block">Register on Regular</a>
      </div>
      <div class="price-card featured">
        <span class="ribbon">Recommended</span>
        <h3>Prime — 2 visits/month</h3>
        <p style="color:var(--ink-500);">Twice-monthly inspection, plus priority emergency response.</p>
        <div class="price-amount">₹3,500 <span>/ property / month</span></div>
        <p style="font-size:.82rem;color:var(--gold-700);font-weight:600;margin-top:-8px;">₹2,500 / property / month if you register more than 2 properties</p>
        <ul class="price-list">
          <li>✅ 2 recurring on-site inspection visits/month</li>
          <li>✅ Everything included in Regular</li>
          <li>🚨 <b>Emergency SOS</b> — instant high-priority alert to Admin &amp; your Manager</li>
          <li>✅ 6 one-tap emergency types (break-in, encroachment, fire, flood, utility, other)</li>
          <li>✅ Fastest response path in the platform</li>
        </ul>
        <a href="portal/index.html#register" class="btn btn-gold btn-block">Register on Prime</a>
      </div>
    </div>
    <p class="text-center" style="font-size:.85rem;color:var(--ink-500);margin-top:24px;">Example: 1 property on Regular = ₹2,000/month; 1 property on Prime = ₹3,500/month. 3 properties on Regular = ₹4,500/month (₹1,500 each — the more-than-2-properties rate); 3 properties on Prime = ₹7,500/month (₹2,500 each). Invoices are generated automatically and downloadable as PDF from your dashboard.</p>
  </div>
</section>

<section class="section-tint">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Compare</span>
      <h2>Regular vs. Prime</h2>
    </div>
    <div class="table-wrap">
      <table class="compare">
        <thead><tr><th>Feature</th><th>Regular</th><th>Prime</th></tr></thead>
        <tbody>
          <tr><td>Inspection visits per month</td><td>1</td><td>2</td></tr>
          <tr><td>Tamper-evident PDF reports</td><td class="yes">✓</td><td class="yes">✓</td></tr>
          <tr><td>Real-time dashboard</td><td class="yes">✓</td><td class="yes">✓</td></tr>
          <tr><td>Support ticket desk</td><td class="yes">✓</td><td class="yes">✓</td></tr>
          <tr><td>Emergency SOS priority alert</td><td class="no">Not included</td><td class="yes">✓</td></tr>
          <tr><td>Monthly price — 1 or 2 properties</td><td>₹2,000 / property</td><td>₹3,500 / property</td></tr>
          <tr><td>Monthly price — more than 2 properties</td><td>₹1,500 / property</td><td>₹2,500 / property</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="cta-band">
      <h2>Questions about pricing for multiple properties?</h2>
      <p>Message us on WhatsApp — we'll walk you through the exact monthly figure for your portfolio.</p>
      <a href="https://wa.me/WANUM" target="_blank" rel="noopener" class="btn btn-navy">Chat on WhatsApp</a>
    </div>
  </div>
</section>
""".replace("WANUM", WHATSAPP_NUMBER)

page(
    "pricing.html",
    "Pricing — Regular & Prime Plans | NRI Property Guard",
    "Transparent monthly pricing: Regular (1 visit/month) from Rs 2,000/property, Prime (2 visits/month) from Rs 3,500/property — automatically discounted per property once you register more than 2 properties.",
    "pricing.html",
    PRICING_BODY,
)
