// Plans page — Free / Featured $99 / Premium $299 tier comparison
// Exports: window.Plans
//
// Renders data.plans[] as a three-column ladder. The middle tier (Featured)
// is highlighted via the `featured: true` field. Feature rows are checkmark-
// matrix style; rows with header: true introduce a section break inside a tier.

function Plans({ onNav, wineryId }) {
  const D = window.TX_DATA;
  const plans = D.plans;
  const w = wineryId ? D.wineries.find(x => x.id === wineryId) : null;

  return (
    <main>
      {/* Hero */}
      <div className="container" style={{ paddingTop: 56, paddingBottom: 32 }}>
        <div className="section-label">For Wineries</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6.5vw, 100px)' }}>
            Three plans.<br/>One directory.
          </h1>
          <p className="lede">
            Every Texas winery starts with a free listing. Featured and Premium
            tiers give you control over how your story is told, where you appear,
            and what we measure. No long-term contracts; pause or upgrade anytime.
          </p>
        </div>

        {w && (
          <div style={{ marginTop: 32, padding: '18px 24px', background: 'var(--chip)', borderLeft: '3px solid var(--accent)', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--ink-soft)' }}>
            Choosing a plan for <strong style={{ color: 'var(--ink)' }}>{w.name}</strong>. Your free listing is already live — pick a tier below to upgrade.
          </div>
        )}
      </div>

      {/* Three columns */}
      <div className="container" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
          {plans.map(p => <PlanCard key={p.id} p={p} onNav={onNav} wineryId={wineryId} />)}
        </div>
      </div>

      {/* Compact feature matrix — full comparison */}
      <div className="container" style={{ paddingBottom: 80 }}>
        <div className="section-label">Compare all features</div>
        <h2 className="h2" style={{ marginBottom: 24 }}>Side by side.</h2>
        <FullMatrix plans={plans} />
      </div>

      {/* FAQ */}
      <div className="container" style={{ paddingBottom: 96 }}>
        <div className="section-label">Common questions</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginTop: 24 }}>
          {[
            {
              q: 'Do I have to pay to be listed?',
              a: 'No. Every bonded Texas winery gets a free listing — we build the page from public sources whether you claim it or not. Paid tiers give you control over the page, photos, CTAs, and where you show up.',
            },
            {
              q: 'Can I switch tiers later?',
              a: 'Yes, anytime. Upgrade from Free to Featured to Premium (or downgrade) in your portal. We prorate on month-by-month basis.',
            },
            {
              q: 'What counts as an "editorial feature"?',
              a: 'A 1,200–1,500 word piece written by our editorial desk, in our voice. Premium wineries get one feature per year, scheduled around a release or season of your choosing.',
            },
            {
              q: 'Is there a long-term contract?',
              a: 'No. Featured and Premium are month-to-month. We bill the first of each month; cancel anytime through the portal and your tier downgrades at the end of the billing cycle.',
            },
            {
              q: 'What if my listing has errors?',
              a: 'Anyone can submit a correction via the "Suggest an edit" button on any listing — we vet and apply. Claimed listings (Free or paid) can edit fields directly through the portal.',
            },
            {
              q: 'How does promoted placement work?',
              a: 'Premium tier wineries appear above non-Premium results on region and directory pages, and rotate through homepage spotlights quarterly. Placements are clearly marked as Premium throughout the site.',
            },
          ].map(f => (
            <div key={f.q}>
              <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 20, margin: '0 0 8px', letterSpacing: '-0.01em' }}>{f.q}</h4>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0 }}>{f.a}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '72px 0' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="section-label" style={{ color: 'rgba(255,255,255,0.5)' }}>Still deciding?</div>
            <h2 className="h1" style={{ color: 'var(--paper)', marginBottom: 16 }}>Start with the free listing.</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, opacity: 0.8, maxWidth: '50ch' }}>
              Claim your page, take a look at the portal, and upgrade when (or if) you're ready. We'll never auto-charge you for a plan you didn't pick.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexDirection: 'column' }}>
            <button className="btn" onClick={() => onNav('claim', wineryId)}
              style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)', justifyContent: 'center', padding: '16px 24px' }}>
              Claim your listing free
            </button>
            <button className="btn btn-ghost" onClick={() => onNav('advertise')}
              style={{ color: 'var(--paper)', borderColor: 'rgba(255,255,255,0.4)', justifyContent: 'center', padding: '14px 24px' }}>
              I'm not a winery — Partnerships →
            </button>
          </div>
        </div>
      </div>
    </main>
  );
}

/* ============================================================
   Single plan column. Featured tier (the $99 middle) lifts up
   and uses the accent ink-on-paper inversion for emphasis.
   ============================================================ */
function PlanCard({ p, onNav, wineryId }) {
  const isFeatured = p.featured;
  return (
    <article style={{
      position: 'relative',
      background: isFeatured ? 'var(--ink)' : 'var(--paper)',
      color: isFeatured ? 'var(--paper)' : 'var(--ink)',
      border: isFeatured ? '1px solid var(--ink)' : '1px solid var(--rule)',
      padding: '36px 28px',
      transform: isFeatured ? 'translateY(-12px)' : 'none',
      boxShadow: isFeatured ? '0 24px 60px rgba(0,0,0,0.15)' : 'none',
      display: 'flex', flexDirection: 'column',
    }}>
      {isFeatured && (
        <div style={{
          position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--accent)', color: 'var(--paper)',
          padding: '4px 14px', fontSize: 10, fontFamily: 'var(--font-ui)',
          letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700,
          borderRadius: 99,
        }}>
          Most chosen
        </div>
      )}

      <div style={{
        fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.2em',
        textTransform: 'uppercase', fontWeight: 600,
        color: isFeatured ? 'rgba(255,255,255,0.6)' : 'var(--ink-mute)',
        marginBottom: 12,
      }}>
        {p.name}
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 700,
          letterSpacing: '-0.025em', lineHeight: 1,
        }}>
          ${p.price}
        </span>
        {p.cadence && (
          <span style={{
            fontFamily: 'var(--font-body)', fontSize: 15,
            color: isFeatured ? 'rgba(255,255,255,0.6)' : 'var(--ink-mute)',
          }}>
            {p.cadence}
          </span>
        )}
      </div>

      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 20, marginTop: 14,
        fontStyle: 'italic',
        color: isFeatured ? 'var(--paper)' : 'var(--ink)',
      }}>
        {p.tagline}
      </div>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55,
        margin: '8px 0 24px',
        color: isFeatured ? 'rgba(255,255,255,0.75)' : 'var(--ink-soft)',
      }}>
        {p.blurb}
      </p>

      <button
        onClick={() => onNav(p.id === 'free' ? 'claim' : 'portal', wineryId)}
        className="btn"
        style={{
          width: '100%', justifyContent: 'center',
          background: isFeatured ? 'var(--paper)' : 'var(--ink)',
          color: isFeatured ? 'var(--ink)' : 'var(--paper)',
          borderColor: isFeatured ? 'var(--paper)' : 'var(--ink)',
          marginBottom: 24,
        }}
      >
        {p.ctaLabel}
      </button>

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.5, flex: 1 }}>
        {p.features.map((f, i) => {
          if (f.header) {
            return (
              <li key={i} style={{
                fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.16em',
                textTransform: 'uppercase', fontWeight: 600,
                color: isFeatured ? 'rgba(255,255,255,0.55)' : 'var(--ink-mute)',
                padding: '12px 0 6px',
                borderBottom: isFeatured ? '1px solid rgba(255,255,255,0.15)' : '1px dotted var(--rule)',
                marginBottom: 8,
              }}>
                {f.label}
              </li>
            );
          }
          return (
            <li key={i} style={{
              display: 'flex', gap: 10, padding: '6px 0',
              opacity: f.included ? 1 : 0.4,
            }}>
              <span style={{
                color: f.included ? (isFeatured ? 'var(--paper)' : 'var(--accent)') : 'currentColor',
                flexShrink: 0, fontWeight: 700,
              }}>
                {f.included ? '✓' : '—'}
              </span>
              <span>{f.label}</span>
            </li>
          );
        })}
      </ul>
    </article>
  );
}

/* ============================================================
   Full feature comparison matrix below the three cards.
   Renders the union of all features across plans as rows.
   ============================================================ */
function FullMatrix({ plans }) {
  // Build the master feature list — Premium has the most rows, so derive
  // categories from it plus anything unique in lower tiers.
  const allLabels = new Set();
  plans.forEach(p => p.features.forEach(f => { if (!f.header) allLabels.add(f.label); }));
  const labels = Array.from(allLabels);

  const has = (plan, label) => {
    const f = plan.features.find(x => x.label === label);
    if (f) return f.included;
    // Premium has "Everything in Featured" — inherit from Featured for matrix display
    if (plan.id === 'premium') {
      const featured = plans.find(x => x.id === 'featured');
      const inFeatured = featured?.features.find(x => x.label === label);
      return inFeatured ? inFeatured.included : false;
    }
    return false;
  };

  return (
    <table style={{
      width: '100%', borderCollapse: 'collapse',
      fontFamily: 'var(--font-body)', fontSize: 14,
      background: 'var(--paper)', border: '1px solid var(--rule)',
    }}>
      <thead>
        <tr style={{ borderBottom: '2px solid var(--ink)' }}>
          <th style={{
            textAlign: 'left', padding: '16px 18px',
            fontFamily: 'var(--font-ui)', fontSize: 10,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--ink-mute)', fontWeight: 600, width: '46%',
          }}>
            Feature
          </th>
          {plans.map(p => (
            <th key={p.id} style={{
              textAlign: 'center', padding: '16px 12px',
              fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
            }}>
              {p.name}
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11, color: 'var(--ink-mute)', fontWeight: 500, marginTop: 2 }}>
                ${p.price}{p.cadence}
              </div>
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {labels.map(label => (
          <tr key={label} style={{ borderBottom: '1px solid var(--rule)' }}>
            <td style={{ padding: '12px 18px', color: 'var(--ink)' }}>{label}</td>
            {plans.map(p => (
              <td key={p.id} style={{
                textAlign: 'center', padding: '12px 12px',
                color: has(p, label) ? 'var(--accent)' : 'var(--ink-mute)',
                fontWeight: 700,
              }}>
                {has(p, label) ? '✓' : '—'}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

window.Plans = Plans;