/* global React, ArrowRight */
const { useState, useEffect } = React;

// ---------- HOME PAGE ----------
function HomePage({ navigate, calloutOption = 'optionA' }) {
  const [daysRemaining, setDaysRemaining] = useState(0);

  useEffect(() => {
    const deadline = new Date('2027-01-31T00:00:00');
    const today = new Date();
    const diffTime = deadline - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    setDaysRemaining(diffDays > 0 ? diffDays : 0);
  }, []);

  return (
    <main>
      {/* 1. Hero Section */}
      <section id="home" className="section lg hero-section">
        <div className="container hero-split">
          {/* Left Column: Hero Text */}
          <div className="hero-text-col">
            <h1 className={`display ${calloutOption === 'optionA' ? 'hero-headline-scaled' : ''} animate-fade-in`} style={{ maxWidth: 960 }}>
              Your Cayman PPoC Deadline Is <span style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--maroon-2)' }}>January 31, 2027.</span>
            </h1>
            <div className="rule animate-fade-in delay-100" />
            <p className="lede animate-fade-in delay-200" style={{ maxWidth: 840 }}>
              Every Cayman Financial Institution must appoint a physical, Cayman-resident Principal Point of Contact — or face an automatic USD $12,200 penalty. CRS and FATCA annual returns now consolidate to a single June 30th deadline. The Cayman Compliance Desk handles both.
            </p>
            
            {calloutOption === 'original' && (
              <p className="sub-lede animate-fade-in delay-300" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink-soft)', maxWidth: 720, lineHeight: 1.5, marginTop: 12 }}>
                Flat-rate DITC reporting and on-island PPoC services for Cayman-registered funds and corporate vehicles. You pay for a guaranteed, compliant filing — not billable hours.
              </p>
            )}

            {calloutOption === 'optionA' && (
              <div className="how-we-help-bar animate-fade-in delay-300">
                <div className="label-col">How We Help</div>
                <div className="divider"></div>
                <div className="text-col">
                  <span className="highlight">Flat fee. Guaranteed compliant filing.</span> DITC reporting + on-island PPoC services for Cayman-registered funds and corporate vehicles — you pay for compliance, not billable hours.
                </div>
              </div>
            )}

            <div className="animate-fade-in delay-400" style={{ display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" onClick={() => navigate('diagnostic')}>
                Get Your Free 48-Hour DITC Gap Diagnostic <ArrowRight />
              </a>
              <a className="btn btn-ghost" onClick={() => navigate('pricing')}>
                See Pricing
              </a>
            </div>
          </div>

          {/* Right Column: Calendar Card */}
          <div className={`hero-visual-col ${calloutOption === 'optionA' ? 'shifted-up' : ''} animate-fade-in delay-500`} style={{ width: '100%' }}>
            <div className={`cal-card ${calloutOption === 'optionA' ? 'compact-cal' : ''}`}>
              {/* Header */}
              <div className="cal-header">
                <div className="cal-header-row">
                  <div>
                    <div className="cal-header-meta">Compliance Timeline</div>
                    <div className="cal-header-month">January 2027</div>
                  </div>
                  <span className="penalty-badge">! Active penalty</span>
                </div>
              </div>

              {/* Calendar grid */}
              <div className="cal-grid">
                <div className="cal-row">
                  <div className="cal-cell day-label">S</div>
                  <div className="cal-cell day-label">M</div>
                  <div className="cal-cell day-label">T</div>
                  <div className="cal-cell day-label">W</div>
                  <div className="cal-cell day-label">T</div>
                  <div className="cal-cell day-label">F</div>
                  <div className="cal-cell day-label">S</div>
                </div>
                <div className="cal-row">
                  <div className="cal-cell muted">—</div>
                  <div className="cal-cell muted">—</div>
                  <div className="cal-cell muted">—</div>
                  <div className="cal-cell muted">—</div>
                  <div className="cal-cell muted">—</div>
                  <div className="cal-cell">1</div>
                  <div className="cal-cell">2</div>
                </div>
                <div className="cal-row">
                  <div className="cal-cell">3</div>
                  <div className="cal-cell">4</div>
                  <div className="cal-cell">5</div>
                  <div className="cal-cell">6</div>
                  <div className="cal-cell">7</div>
                  <div className="cal-cell">8</div>
                  <div className="cal-cell">9</div>
                </div>
                <div className="cal-row">
                  <div className="cal-cell">10</div>
                  <div className="cal-cell">11</div>
                  <div className="cal-cell">12</div>
                  <div className="cal-cell">13</div>
                  <div className="cal-cell">14</div>
                  <div className="cal-cell">15</div>
                  <div className="cal-cell">16</div>
                </div>
                <div className="cal-row">
                  <div className="cal-cell">17</div>
                  <div className="cal-cell">18</div>
                  <div className="cal-cell">19</div>
                  <div className="cal-cell">20</div>
                  <div className="cal-cell">21</div>
                  <div className="cal-cell">22</div>
                  <div className="cal-cell">23</div>
                </div>
                <div className="cal-row">
                  <div className="cal-cell">24</div>
                  <div className="cal-cell">25</div>
                  <div className="cal-cell">26</div>
                  <div className="cal-cell">27</div>
                  <div className="cal-cell">28</div>
                  <div className="cal-cell">29</div>
                  <div className="cal-cell">30</div>
                </div>
                <div className="cal-row">
                  <div className="cal-cell"><span className="circle-31">31</span></div>
                </div>
              </div>

              {/* Date annotations */}
              <div className="cal-dates">
                <div className="cal-date-item">
                  <div className="dot"></div>
                  <div>
                    <span className="date-primary">Jan 31, 2027</span> — PPoC grace period ends. Automatic USD $12,200 penalty applies to every non-compliant entity.
                  </div>
                </div>
                <div className="cal-date-item">
                  <div className="dot secondary"></div>
                  <div className="date-secondary">
                    Jun 30, 2027 — CRS Annual Return &amp; FATCA consolidated filing deadline.
                  </div>
                </div>
              </div>

              {/* Stats */}
              <div className="cal-stats">
                <div className="stat-block">
                  <div className="stat-label">Days remaining</div>
                  <div className="stat-value">{daysRemaining.toLocaleString()}</div>
                  <div className="stat-sub">until Jan 31, 2027</div>
                </div>
                <div className="stat-block bordered">
                  <div className="stat-label">Penalty exposure</div>
                  <div className="stat-value">$12,200</div>
                  <div className="stat-sub">USD per entity, per year</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {calloutOption === 'optionB' && (
          <div className="container" style={{ marginTop: 24, marginBottom: -12 }}>
            <div className="how-we-help-bar" style={{ margin: '0 auto' }}>
              <div className="label-col">How We Help</div>
              <div className="divider"></div>
              <div className="text-col">
                <span className="highlight">Flat fee. Guaranteed compliant filing.</span> DITC reporting + on-island PPoC services for Cayman-registered funds and corporate vehicles — you pay for compliance, not billable hours.
              </div>
            </div>
          </div>
        )}
      </section>

      {/* 2. Urgency Bar */}
      <section className="urgency-bar-section">
        <div className="container">
          <div className="urgency-bar scroll-reveal">
            <div className="urgency-item">
              <span className="lbl">PPoC Grace Period Ends</span>
              <span className="val">January 31, 2027</span>
            </div>
            <div className="urgency-item">
              <span className="lbl">Statutory Penalty for Non-Compliance</span>
              <span className="val">USD $12,200</span>
            </div>
            <div className="urgency-item">
              <span className="lbl">CRS/FATCA Consolidated Deadline</span>
              <span className="val">June 30, 2027</span>
            </div>
          </div>
        </div>
      </section>

      {/* 3. The Problem Section */}
      <section id="why-us" className="section problem-section">
        <div className="container">
          <div className="scroll-reveal">
            <span className="eyebrow maroon">The Regulatory Reality</span>
            <h2 className="display" style={{ marginTop: 12, maxWidth: 760 }}>
              Two Deadlines. Both Non-Negotiable.
            </h2>
            <div className="rule" />
          </div>

          <div className="problems-grid" style={{ marginTop: 36 }}>
            <div className="problem-card scroll-reveal stagger-1">
              <span className="problem-tag">Mandate A</span>
              <h3>Your PPoC May Already Be Non-Compliant.</h3>
              <p>
                If your fund's current Principal Point of Contact is not a physical Cayman resident, you are in breach of the DITC's new mandate. The transitional grace period ends January 31, 2027. After that date, the USD $12,200 statutory penalty applies automatically — there is no further extension.
              </p>
              <p style={{ marginTop: 14 }}>
                Traditional corporate service providers and law firms are already at capacity. They cannot hire Cayman-resident staff fast enough to absorb the volume of affected entities before the deadline. Most funds will be left scrambling.
              </p>
            </div>
            <div className="problem-card scroll-reveal stagger-2">
              <span className="problem-tag">Mandate B</span>
              <h3>CRS and FATCA Deadlines Just Got Harder.</h3>
              <p>
                Starting with the 2026 reporting period, the DITC has permanently consolidated its timelines. Your CRS Annual Return and your CRS Compliance Form are now due on the same date: June 30th. One deadline. Two filings. No room for the manual, spreadsheet-driven processes most fund administrators still rely on.
              </p>
              <p style={{ marginTop: 14 }}>
                Law firms charging $600–$900 per hour for XML schema preparation are not a scalable answer. There is a better way.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 4. Services Section */}
      <section id="services" className="section services-section">
        <div className="container">
          <div className="scroll-reveal">
            <span className="eyebrow maroon">Services</span>
            <h2 className="display" style={{ marginTop: 12 }}>What We Do</h2>
            <p className="lede" style={{ marginTop: 8 }}>
              Two compliance obligations. Both handled. Both flat-rate.
            </p>
            <div className="rule" />
          </div>

          <div className="services-grid" style={{ marginTop: 36 }}>
            {/* Service 1 */}
            <div className="service-card card scroll-reveal stagger-1">
              <span className="label">Service 01</span>
              <h3 className="title-italic">On-Island Principal Point of Contact</h3>
              <div className="service-price">From USD $2,000 / year</div>
              <p className="meta" style={{ minHeight: '80px' }}>
                We act as your Cayman-resident, street-addressed Principal Point of Contact on the DITC portal. We handle all statutory correspondence, regulatory liaison, and annual confirmation filings on your behalf.
              </p>
              <p className="meta" style={{ fontStyle: 'normal', fontSize: '13.5px', marginBottom: '20px' }}>
                Governance stays clean: your offshore directors and asset managers retain authority as the Authorising Person. We hold the regulatory relationship. You retain control.
              </p>
              
              <div className="included-title">Included:</div>
              <ul className="included-list">
                <li>DITC portal PPoC registration (or transfer from existing non-compliant PPoC)</li>
                <li>Statutory and regulatory mail handling</li>
                <li>Breach notice triage and escalation</li>
                <li>Annual PPoC confirmation filings</li>
                <li>Documented response workflow for DITC queries</li>
              </ul>
              
              <div className="best-for">
                <strong>Best for:</strong> Funds whose existing fund administrator handles CRS/FATCA filing but whose current PPoC is non-Cayman resident.
              </div>

              <a className="btn btn-ghost" onClick={() => navigate('diagnostic')} style={{ marginTop: 'auto', width: '100%', justifyContent: 'center' }}>
                Get PPoC-Compliant Before January 2027 <ArrowRight />
              </a>
            </div>

            {/* Service 2 */}
            <div className="service-card card scroll-reveal stagger-2">
              <span className="label">Service 02</span>
              <h3 className="title-italic">CRS, FATCA &amp; Economic Substance Reporting</h3>
              <div className="service-price">From USD $1,500 / year</div>
              <p className="meta" style={{ minHeight: '80px' }}>
                We ingest your investor and transaction data, normalize it against current OECD XML Schema standards, and generate your complete CRS/FATCA returns for direct submission to the DITC portal.
              </p>
              <p className="meta" style={{ fontStyle: 'normal', fontSize: '13.5px', marginBottom: '20px' }}>
                You never handle a spreadsheet or an XML file. You receive a submission confirmation. That's the entire experience. We bundle on-island PPoC with full reporting execution — one provider, one flat fee.
              </p>

              <div className="included-title">Included:</div>
              <ul className="included-list">
                <li>Secure data ingestion via SFTP or encrypted file transfer</li>
                <li>Automated schema translation to OECD CRS v3.0 / FATCA XML format</li>
                <li>Investor self-certification audit and gap identification</li>
                <li>Exception flagging and resolution before submission</li>
                <li>Direct DITC portal lodgement</li>
                <li>Submission confirmation and annual filing archive</li>
              </ul>

              <div className="best-for">
                <strong>Best for:</strong> Standalone PE/Hedge Funds and feeders whose CRS/FATCA filing is currently managed by a law firm, an underprepared administrator, or not managed at all.
              </div>

              <a className="btn btn-ghost" onClick={() => navigate('diagnostic')} style={{ marginTop: 'auto', width: '100%', justifyContent: 'center' }}>
                Get a Free Filing Assessment <ArrowRight />
              </a>
            </div>

            {/* Service 3 */}
            <div className="service-card card scroll-reveal stagger-3">
              <span className="label">Service 03</span>
              <h3 className="title-italic">Economic Substance Notification</h3>
              <div className="service-price">USD $1,500 / year</div>
              <p className="meta" style={{ minHeight: '80px', marginBottom: '20px' }}>
                For passive holding companies, LLCs, and prop-trading structures with straightforward substance obligations, we manage your Annual Economic Substance Notification and basic multi-jurisdiction tax mapping.
              </p>
              <p className="meta" style={{ fontStyle: 'normal', fontSize: '13.5px' }}>
                Simple, affordable, and handled. We ensure that notification filings are validated against DITC guidelines, submitted on schedule, and archived securely.
              </p>
              
              <div className="included-title" style={{ marginTop: '20px' }}>Included:</div>
              <ul className="included-list" style={{ marginBottom: 'auto' }}>
                <li>Annual Economic Substance Notification filing</li>
                <li>DITC core classification assessment</li>
                <li>Multi-jurisdiction tax nexus mapping</li>
                <li>Filing validation certificates</li>
                <li>Secure document archiving</li>
              </ul>

              <a className="btn btn-ghost" onClick={() => navigate('diagnostic')} style={{ marginTop: '30px', width: '100%', justifyContent: 'center' }}>
                Get Started <ArrowRight />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* 5. How It Works Section */}
      <section id="how-it-works" className="section works-section">
        <div className="container">
          <div className="scroll-reveal">
            <span className="eyebrow maroon">Process</span>
            <h2 className="display" style={{ marginTop: 12, maxWidth: 760 }}>
              Three Steps. One Filing. Done.
            </h2>
            <div className="rule" />
          </div>
          <div className="steps" style={{ marginTop: 36 }}>
            <div className="step scroll-reveal stagger-1">
              <div className="n">01</div>
              <h4>Onboard</h4>
              <p>
                Share your entity structure and investor data via secure transfer. We map your filing obligations, identify compliance gaps, and confirm your engagement scope within 48 hours.
              </p>
            </div>
            <div className="step scroll-reveal stagger-2">
              <div className="n">02</div>
              <h4>We File</h4>
              <p>
                Our AI pipeline ingests your data, validates it against the current DITC schema, and surfaces only the exceptions that need human attention. We resolve gaps, run final verification, and submit directly to the DITC portal.
              </p>
            </div>
            <div className="step scroll-reveal stagger-3">
              <div className="n">03</div>
              <h4>You're Done</h4>
              <p>
                You receive a submission confirmation. Your filing is documented, archived, and defensible. No spreadsheets. No XML. No law firm invoice.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 6. Pricing Section */}
      <section id="pricing" className="section pricing-section">
        <div className="container">
          <div className="scroll-reveal">
            <span className="eyebrow maroon">Pricing</span>
            <h2 className="display" style={{ marginTop: 12 }}>Predictable Fees. No Billable Hours.</h2>
            <p className="lede" style={{ marginTop: 8 }}>
              All prices are annual flat fees. No hourly billing. No surprise invoices. You know the cost before you engage.
            </p>
            <div className="rule" />
          </div>

          <div className="table-responsive scroll-reveal stagger-1">
            <table className="pricing-table">
              <thead>
                <tr>
                  <th>Tier</th>
                  <th>Best For</th>
                  <th>What's Included</th>
                  <th>Annual Fee</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><strong>Substance</strong></td>
                  <td>Passive holding companies, LLCs, prop-trading structures</td>
                  <td>Annual Economic Substance Notification + multi-jurisdiction tax mapping</td>
                  <td className="price">$1,500</td>
                </tr>
                <tr>
                  <td><strong>PPoC Only</strong></td>
                  <td>Funds whose admin handles CRS/FATCA but whose PPoC is non-Cayman resident</td>
                  <td>On-island PPoC registration, DITC portal management, statutory correspondence, regulatory liaison</td>
                  <td className="price">$2,000–$2,500</td>
                </tr>
                <tr className="featured-row">
                  <td><strong>CRS 2.0 Engine</strong></td>
                  <td>Standalone PE/hedge funds and feeders needing end-to-end filing</td>
                  <td>On-island PPoC + investor self-certification audit + automated CRS/FATCA returns</td>
                  <td className="price">$4,500 <span className="per">per sub-fund/feeder</span></td>
                </tr>
                <tr>
                  <td><strong>Institutional Retainer</strong></td>
                  <td>Complex asset managers, tokenized funds, active Web3 foundations</td>
                  <td>Continuous ledger monitoring, CARF schema tracking, rolling DITC submissions</td>
                  <td className="price">$2,500 <span className="per">/ month</span></td>
                </tr>
              </tbody>
            </table>
          </div>

          <p className="scroll-reveal stagger-2" style={{ fontStyle: 'italic', fontFamily: 'var(--serif-text)', fontSize: '17px', color: 'var(--ink-soft)', marginTop: '24px', textAlign: 'center' }}>
            Not sure which tier fits your structure? <a onClick={() => navigate('diagnostic')} style={{ cursor: 'pointer', textDecoration: 'underline' }}>The 48-hour diagnostic will tell you.</a>
          </p>
        </div>
      </section>

      {/* 7. Diagnostic Section (Interactive Form) */}
      <DiagnosticForm />

      {/* 8. Why Not a Law Firm Section */}
      <section className="section comparison-section">
        <div className="container">
          <div className="scroll-reveal">
            <span className="eyebrow maroon">The Contrast</span>
            <h2 className="display" style={{ marginTop: 12, maxWidth: 840 }}>
              The Billable Hour Is the Wrong Model for a Data Problem.
            </h2>
            <div className="rule" />
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '44px', alignItems: 'start', marginBottom: '40px' }} className="comparison-content scroll-reveal stagger-1">
            <div>
              <p className="prose-p" style={{ fontSize: '18px', lineHeight: 1.6, color: 'var(--ink-soft)', fontFamily: 'var(--serif-text)' }}>
                When your fund administrator sends investor data to a law firm for CRS reporting, a paralegal manually maps that data into an OECD XML schema — then bills you $600–$900 per hour for the time it took.
              </p>
              <p className="prose-p" style={{ fontSize: '18px', lineHeight: 1.6, color: 'var(--ink-soft)', fontFamily: 'var(--serif-text)', marginTop: '14px' }}>
                DITC reporting is fundamentally a data formatting and validation problem. It does not require a lawyer. It requires a precise, schema-compliant XML file submitted before a hard deadline.
              </p>
            </div>
            <div>
              <p className="prose-p" style={{ fontSize: '18px', lineHeight: 1.6, color: 'var(--ink-soft)', fontFamily: 'var(--serif-text)' }}>
                The Cayman Compliance Desk uses an automated data pipeline to ingest, normalize, and validate your investor data against current DITC schema requirements — and surfaces only the exceptions that need human review.
              </p>
              <p className="prose-p" style={{ fontSize: '18px', lineHeight: 1.6, color: 'var(--ink-soft)', fontFamily: 'var(--serif-text)', marginTop: '14px' }}>
                The result is a faster, more accurate filing at a fraction of the cost. The flat-rate model means we have every incentive to be efficient. Your law firm does not.
              </p>
            </div>
          </div>

          <div className="table-responsive scroll-reveal stagger-2">
            <table className="comparison-table">
              <thead>
                <tr>
                  <th>Metric / Feature</th>
                  <th>Traditional Law Firm / CSP</th>
                  <th>Cayman Compliance Desk</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><strong>Pricing model</strong></td>
                  <td className="negative">Billable hours ($600–$900/hr)</td>
                  <td className="positive">Flat annual fee</td>
                </tr>
                <tr>
                  <td><strong>Data processing</strong></td>
                  <td className="negative">Manual, spreadsheet-driven</td>
                  <td className="positive">Automated AI pipeline</td>
                </tr>
                <tr>
                  <td><strong>Schema accuracy</strong></td>
                  <td className="negative">Human error risk</td>
                  <td className="positive">Validated before submission</td>
                </tr>
                <tr>
                  <td><strong>Turnaround</strong></td>
                  <td className="negative">Weeks</td>
                  <td className="positive">Days</td>
                </tr>
                <tr>
                  <td><strong>PPoC</strong></td>
                  <td className="negative">May not be Cayman-resident</td>
                  <td className="positive">Always Cayman-resident</td>
                </tr>
                <tr>
                  <td><strong>Your involvement</strong></td>
                  <td className="negative">Significant</td>
                  <td className="positive">Minimal</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* 9. FAQ Section */}
      <FaqSection />

      {/* 10. Final CTA Section */}
      <section className="section final-cta-section" style={{ paddingBottom: '100px' }}>
        <div className="container">
          <div className="final-cta-card scroll-reveal" style={{ background: 'var(--maroon)', color: '#f5ebd9', borderRadius: 2, textAlign: 'center', position: 'relative' }}>
            <span className="eyebrow" style={{ color: 'rgba(245,235,217,0.7)', letterSpacing: '0.25em' }}>January 2027 Deadline</span>
            <h2 className="display" style={{ color: '#f5ebd9', marginTop: 12, marginBottom: 12 }}>
              The January 2027 Deadline Is Not Moving.
            </h2>
            <h3 style={{ fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontWeight: 500, fontSize: '24px', color: 'rgba(245,235,217,0.9)', margin: '0 auto 20px', maxWidth: '600px' }}>
              Getting compliant takes one conversation.
            </h3>
            <p style={{ fontFamily: 'var(--serif-text)', fontSize: '18px', color: 'rgba(245,235,217,0.8)', margin: '0 auto 36px', maxWidth: '720px', lineHeight: 1.55 }}>
              If your fund's PPoC is not a Cayman resident, or your CRS/FATCA filings are handled manually by a law firm, the time to act is now — not in Q4 2026. The Cayman Compliance Desk gets you compliant fast, at a predictable annual cost, with no billable-hour surprises.
            </p>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
              <a className="btn" style={{ background: '#f5ebd9', color: 'var(--maroon)', borderColor: '#f5ebd9' }} onClick={() => navigate('diagnostic')}>
                Request Your Free DITC Gap Diagnostic <ArrowRight />
              </a>
            </div>
            <div style={{ marginTop: '40px', fontSize: '13px', color: 'rgba(245,235,217,0.6)', fontFamily: 'var(--sans)' }}>
              Cayman Compliance Desk operates from Grand Cayman, Cayman Islands.<br/>
              Questions? Email us at <a href="mailto:desk@caymandesk.com" style={{ color: '#f5ebd9', textDecoration: 'underline' }}>desk@caymandesk.com</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- FAQ Component ----------
function FaqSection() {
  const [openIndex, setOpenIndex] = useState(null);

  const faqs = [
    {
      q: "Is the Cayman Compliance Desk a law firm?",
      a: "No. We are a regulatory operations provider, not a law firm, and we do not provide legal advice. For matters requiring legal counsel, we will refer you to a qualified Cayman attorney. Our service covers data processing, XML schema generation, DITC portal management, and on-island PPoC representation — none of which constitutes legal practice."
    },
    {
      q: "Who is the named PPoC — an individual or a corporate entity?",
      a: "The named PPoC is a Cayman-resident individual, fully satisfying the DITC's physical residency and street address requirements."
    },
    {
      q: "What happens if the DITC issues a query or notice after we file?",
      a: "All statutory correspondence addressed to us as your PPoC is triaged immediately. Routine notices are handled directly. Anything requiring your input or a formal response is escalated to you with a clear brief and a recommended course of action. Response workflows are documented and timestamped."
    },
    {
      q: "Do you handle both CRS and FATCA?",
      a: "Yes. Our CRS 2.0 Engine covers both the OECD Common Reporting Standard (CRS) Annual Return and FATCA filings submitted via the DITC portal. Economic Substance Notifications are covered under our Substance service."
    },
    {
      q: "What data do you need from us to get started?",
      a: "For PPoC-only engagements: your current DITC portal registration details and entity structure documents. For full CRS/FATCA reporting: investor roster, self-certification forms, and transaction/income data for the reporting period. We will provide a structured data request checklist at onboarding."
    },
    {
      q: "What jurisdictions do you cover?",
      a: "Our services cover Cayman Islands DITC reporting obligations. Multi-jurisdiction tax mapping is included in our Substance service for entities with offshore nexus obligations."
    },
    {
      q: "How is our investor data protected?",
      a: "All data is transferred via encrypted SFTP or secure file transfer. Investor PII is handled under strict contractual data-handling agreements. Access is restricted to authorised CCD operators. We carry professional indemnity insurance and maintain a documented data security framework."
    }
  ];

  return (
    <section id="faq" className="section faq-section">
      <div className="container" style={{ maxWidth: 840 }}>
        <div className="scroll-reveal">
          <span className="eyebrow maroon">Help</span>
          <h2 className="display" style={{ marginTop: 12 }}>Common Questions</h2>
          <div className="rule" />
        </div>
        
        <div className="faq-list scroll-reveal stagger-1" style={{ marginTop: 28 }}>
          {faqs.map((faq, idx) => {
            const isOpen = openIndex === idx;
            return (
              <div key={idx} className={`faq-item ${isOpen ? 'open' : ''}`}>
                <button 
                  className="faq-question" 
                  onClick={() => setOpenIndex(isOpen ? null : idx)}
                  aria-expanded={isOpen}
                >
                  <span>{faq.q}</span>
                  <span className="faq-toggle-icon">{isOpen ? '−' : '+'}</span>
                </button>
                <div className="faq-answer">
                  <div className="faq-answer-content">
                    <p>{faq.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- Diagnostic Request Form Component ----------
function DiagnosticForm() {
  const [formData, setFormData] = useState({
    fundName: '',
    email: '',
    currentPpocLocation: '',
    ditcDetails: ''
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (formData.fundName.trim() && formData.email.trim()) {
      setSubmitted(true);
    }
  };

  return (
    <section id="diagnostic" className="section diagnostic-section">
      <div className="container" style={{ maxWidth: 800 }}>
        <div className="scroll-reveal">
          <span className="eyebrow maroon">Diagnostic</span>
          <h2 className="display" style={{ marginTop: 12 }}>Find Out in 48 Hours if Your Fund Is Exposed.</h2>
          <div className="rule" />
        </div>
        
        {submitted ? (
          <div className="diagnostic-success scroll-reveal stagger-1">
            <div className="success-icon">✓</div>
            <h3>Diagnostic Request Received Successfully</h3>
            <p>
              Thank you for submitting your fund's DITC details. We are compiling your complimentary gap analysis report and will send it to:
            </p>
            <div className="success-email">{formData.email}</div>
            <p style={{ marginTop: '12px' }}>
              We will confirm your PPoC compliance, identify filing gaps, and check your CRS data quality within <strong>48 working hours</strong>. No obligation.
            </p>
            <button 
              className="btn btn-primary" 
              onClick={() => {
                setSubmitted(false);
                setFormData({ fundName: '', email: '', currentPpocLocation: '', ditcDetails: '' });
              }}
              style={{ marginTop: '24px' }}
            >
              Request Another Diagnostic
            </button>
          </div>
        ) : (
          <div className="diagnostic-container scroll-reveal stagger-1">
            <p className="lede" style={{ marginBottom: 28 }}>
              Submit your fund's DITC registration details and we will run a complimentary gap analysis — confirming your PPoC compliance status, identifying outstanding filing obligations, and assessing your CRS data quality. We return a written report within 48 working hours.
            </p>
            
            <form onSubmit={handleSubmit} className="diagnostic-form">
              <div className="form-row">
                <div className="form-group">
                  <label htmlFor="fundName">Fund Name <span className="req">*</span></label>
                  <input 
                     type="text" 
                    id="fundName" 
                    required 
                    value={formData.fundName} 
                    onChange={e => setFormData({...formData, fundName: e.target.value})} 
                    placeholder="e.g. Cayman Alpha Fund SPC" 
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="email">Contact Email <span className="req">*</span></label>
                  <input 
                    type="email" 
                    id="email" 
                    required 
                    value={formData.email} 
                    onChange={e => setFormData({...formData, email: e.target.value})} 
                    placeholder="e.g. compliance@yourfund.com" 
                  />
                </div>
              </div>

              <div className="form-group">
                <label htmlFor="currentPpocLocation">Current PPoC Physical Location (City / Country)</label>
                <input 
                  type="text" 
                  id="currentPpocLocation" 
                  value={formData.currentPpocLocation} 
                  onChange={e => setFormData({...formData, currentPpocLocation: e.target.value})} 
                  placeholder="e.g. New York, USA (leave blank if none)" 
                />
              </div>

              <div className="form-group">
                <label htmlFor="ditcDetails">DITC Portal Registration Details &amp; Comments (Optional)</label>
                <textarea 
                  id="ditcDetails" 
                  value={formData.ditcDetails} 
                  onChange={e => setFormData({...formData, ditcDetails: e.target.value})} 
                  placeholder="Provide your DITC registration number or describe outstanding filing/substance requirements..."
                  rows={4}
                />
              </div>

              <div className="diagnostic-covers-box">
                <div className="box-title">What the diagnostic covers:</div>
                <ul className="covers-list">
                  <li>Current PPoC status: compliant or non-compliant</li>
                  <li>Outstanding CRS/FATCA filing obligations</li>
                  <li>Economic Substance notification status</li>
                  <li>Data quality issues likely to cause DITC rejection</li>
                  <li>Recommended tier and estimated annual cost</li>
                </ul>
              </div>

              <button type="submit" className="btn btn-primary btn-submit">
                → Request Your Free DITC Gap Diagnostic
              </button>
            </form>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ navigate }) {
  return (
    <footer>
      <div className="container">
        <div className="foot">
          <div>
            <div style={{ fontFamily: 'var(--serif-display)', fontWeight: 700, fontSize: 16, letterSpacing: '0.14em', color: 'var(--maroon)', textTransform: 'uppercase', marginBottom: 16 }}>Cayman Compliance Desk</div>
            <p className="desc">Flat-rate DITC reporting and on-island PPoC services for Cayman-registered funds and corporate vehicles. George Town, Grand Cayman.</p>
          </div>
          <div>
            <h6>Links</h6>
            <ul>
              <li><a onClick={() => navigate('services')}>Services</a></li>
              <li><a onClick={() => navigate('how-it-works')}>How It Works</a></li>
              <li><a onClick={() => navigate('pricing')}>Pricing</a></li>
              <li><a onClick={() => navigate('why-us')}>Why Us</a></li>
              <li><a href="https://ditc.caymandesk.com" target="_blank" rel="noopener noreferrer">Regulations Guide</a></li>
            </ul>
          </div>
          <div>
            <h6>Obligations</h6>
            <ul>
              <li><a onClick={() => navigate('diagnostic')}>PPoC Compliance</a></li>
              <li><a onClick={() => navigate('pricing')}>CRS 2.0 Engine</a></li>
              <li><a onClick={() => navigate('services')}>Economic Substance</a></li>
              <li><a onClick={() => navigate('faq')}>FAQ Help</a></li>
            </ul>
          </div>
          <div>
            <h6>Contact</h6>
            <ul>
              <li><a href="mailto:desk@caymandesk.com">desk@caymandesk.com</a></li>
              <li><span style={{ fontSize: '12.5px', color: 'var(--ink-soft)' }}>Grand Cayman, Cayman Islands</span></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Cayman Compliance Desk Ltd.</span>
          <span>Cayman Reporting Desk · caymandesk.com</span>
        </div>
      </div>
    </footer>
  );
}

window.HomePage = HomePage;
window.Footer = Footer;