// PlanCards — the 3-card layout (Gexa / Energy Texas / Rhythm) plus details modal.
// Section heading is OPTIONAL via props so the same component can be reused on pages
// that supply their own SectionHeading above it.
const TOP_PLANS = [
  { id: 1, brand: 'Gexa', logo: 'assets/providers/gexa.png', name: 'Gexa Eco Saver 12', tag: { label: 'Most Popular', cls: 'popular' }, popular: true, rate: '7.8', term: '12' },
  { id: 2, brand: 'Energy Texas', logo: 'assets/providers/energy-texas.png', name: 'Come & Take It 12', tag: { label: '100% Renewable', cls: 'green' }, rate: '7.8', term: '12' },
  { id: 3, brand: 'Rhythm', logo: 'assets/providers/rhythm.png', name: 'Rhythm Save 12', tag: { label: 'Highest Rated', cls: 'rated' }, rate: '7.8', term: '12' }
];

function PlanDetailsModal({ plan, onClose }) {
  const [tab, setTab] = React.useState('details');
  if (!plan) return null;
  return (
    <div className="pdm-overlay" onClick={onClose}>
      <div className="pdm" onClick={(e) => e.stopPropagation()}>
        <button className="pdm-close" onClick={onClose} aria-label="Close"><I.X /></button>
        <div className="pdm-head">
          <h3>{plan.name}</h3>
          <p>{plan.brand}</p>
        </div>
        <div className="pdm-tabs">
          <button className={tab === 'details' ? 'on' : ''} onClick={() => setTab('details')}>Plan Details</button>
          <button className={tab === 'pricing' ? 'on' : ''} onClick={() => setTab('pricing')}>Pricing Details</button>
          <button className={tab === 'docs' ? 'on' : ''} onClick={() => setTab('docs')}>Plan Documents</button>
        </div>
        <div className="pdm-body">
          {tab === 'details' &&
            <div className="pdm-grid-2">
              <div>
                <h4>Plan Features</h4>
                <ul className="pdm-list">
                  <li>Rate of {plan.rate}&cent; per kWh at 1000 kWh Usage</li>
                  <li>{plan.term}-Month Term Length</li>
                  <li>Fixed Rate Plan</li>
                  <li>Languages: English</li>
                  <li>Early Termination Fee: $20/months remaining</li>
                </ul>
              </div>
              <div>
                <h4>Additional Fees &amp; Credits</h4>
                <p>A $100 usage credit is applied to any billing cycle in which monthly usage reaches 1,000 kWh or more. Receive a $5 monthly credit when you enroll on autopay and paperless options.</p>
                <h4 className="mt">Special Terms &amp; Promotions</h4>
                <p>{plan.tag.cls === 'green' ? '100% Green Energy' : 'New customer welcome credit available'}</p>
              </div>
            </div>
          }
          {tab === 'pricing' &&
            <div>
              <h4>Pricing Details</h4>
              <table className="pdm-table">
                <thead><tr><th>Monthly Usage</th><th>Price per kWh</th><th>Monthly Est.*</th></tr></thead>
                <tbody>
                  <tr><td>500 kWh</td><td>17.4&cent;</td><td>$87</td></tr>
                  <tr><td>1,000 kWh</td><td>{plan.rate}&cent;</td><td>$74</td></tr>
                  <tr><td>2,000 kWh</td><td>12.4&cent;</td><td>$248</td></tr>
                </tbody>
              </table>
              <p className="pdm-foot-note">*Monthly estimates exclude taxes and additional fees.</p>
            </div>
          }
          {tab === 'docs' &&
            <div className="pdm-grid-3">
              <div>
                <h4>Electricity Facts Label (EFL)</h4>
                <p>An EFL breaks down plan info in more detail to understand a plan&rsquo;s energy rates, fees, terms and conditions and more.</p>
                <a href="#" className="pdm-link">Access the EFL &rarr;</a>
              </div>
              <div>
                <h4>Terms of Service (TOS)</h4>
                <p>The TOS explains the terms and conditions of your electric service with the provider.</p>
                <a href="#" className="pdm-link">Access the TOS &rarr;</a>
              </div>
              <div>
                <h4>Your Rights As a Consumer (YRAC)</h4>
                <p>YRAC protects your rights by detailing all the rights you should know about dealing with the provider.</p>
                <a href="#" className="pdm-link">Access the YRAC &rarr;</a>
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  );
}

function PlanCards(props) {
  const {
    title = 'Top Texas Electricity Plans Near You',
    sub = <React.Fragment>Rates from 7.8&cent;/kWh &bull; updated daily</React.Fragment>,
    showHeading = true,
    showRatesUpdated = true,
    allPlansLabel = 'All plans',
    allPlansProminent = false
  } = props || {};

  const [openPlan, setOpenPlan] = React.useState(null);
  return (
    <section className="sec">
      <div className="container">
        {showHeading && (
          <div className="sec-head">
            <h2 className="sec-title">{title}</h2>
            {sub && <p className="sec-sub">{sub}</p>}
          </div>
        )}
        <div className="plans-zip-line">
          <span>Showing plans for </span>
          <a href="#" className="plans-zip">75204 <I.External /></a>
        </div>
        <div className="plans-grid">
          {TOP_PLANS.map((p) =>
            <article key={p.id} className={`plan${p.popular ? ' plan--popular' : ''}`}>
              <div className="plan-head">
                <div className="plan-head-l">
                  <img className="plan-logo" src={p.logo} alt={p.brand} />
                  <div className="plan-name">{p.name}</div>
                </div>
                <span className={`tag ${p.tag.cls}`}>
                  {p.tag.cls === 'popular' && <span className="tag-dot"></span>}
                  {p.tag.cls === 'green' && <I.Cloud />}
                  {p.tag.cls === 'rated' && <I.Trophy />}
                  {p.tag.label}
                </span>
              </div>
              <div className="plan-stats" style={{ fontFamily: "Poppins" }}>
                <div className="plan-stat">
                  <div className="v" style={{ fontFamily: "Poppins" }}>{p.rate}<span className="unit">&cent;/kWh</span></div>
                  <div className="l">at 1000 kWh</div>
                </div>
                <div className="plan-stat">
                  <div className="v" style={{ fontFamily: "Poppins" }}>{p.term}<span className="unit">mos.</span></div>
                  <div className="l">Fixed rate</div>
                </div>
              </div>
              <button className="plan-cta" style={{ fontFamily: "Poppins" }}>Check Availability</button>
              <div className="plan-foot">
                <a href="#" onClick={(e) => { e.preventDefault(); setOpenPlan(p); }}>Plan details <I.External /></a>
              </div>
            </article>
          )}
        </div>
        <div className={[
          'plans-foot-row',
          !showRatesUpdated && 'plans-foot-row--solo',
          allPlansProminent && 'plans-foot-row--prominent'
        ].filter(Boolean).join(' ')}>
          {showRatesUpdated && <span className="plans-updated">Rates updated as of 4/20/26</span>}
          <a href="#" className={`plans-all${allPlansProminent ? ' plans-all--prominent' : ''}`}>{allPlansLabel} &rarr;</a>
        </div>
      </div>
      <PlanDetailsModal plan={openPlan} onClose={() => setOpenPlan(null)} />
    </section>
  );
}

window.PlanCards = PlanCards;
window.TOP_PLANS = TOP_PLANS;