// Shared component file for the simpler scaffolded pages:
// About, Contact, Terms, Privacy, Sign-in (waitlist), Partner-login (waitlist)

// ---------------------------------------------------------------
// ABOUT
// ---------------------------------------------------------------
const AboutPage = () => (
  <>
    <section style={{
      padding: 'clamp(72px, 10vw, 120px) clamp(24px, 5vw, 64px) clamp(48px, 6vw, 80px)',
      textAlign: 'center', position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 900px 500px at center top, rgba(63,122,77,0.15) 0%, transparent 65%)',
      }}/>
      <div style={{ position: 'relative', maxWidth: 820, margin: '0 auto' }}>
        <div style={{ marginBottom: 24 }}>
          <CCTrustPill>About ContainerConnect</CCTrustPill>
        </div>
        <h1 style={{
          font: '700 clamp(40px, 6vw, 72px)/1.05 Anton, Oswald, sans-serif',
          letterSpacing: '-0.4px', textTransform: 'uppercase',
          margin: 0, color: '#fff',
        }}>A faster way to <span style={{
          background: 'linear-gradient(180deg,#9EE5A8,#7BC57F)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        }}>rent a dumpster.</span></h1>
        <p style={{
          font: '450 clamp(16px, 1.6vw, 19px)/1.6 Inter, system-ui, sans-serif',
          color: CC_T_SECONDARY, margin: '28px auto 0', maxWidth: 640,
        }}>I started ContainerConnect after seeing how many calls offices handle just to rent a dumpster — and wanted to make the process faster, easier, and more automated for both customers and companies. We're in early access, building this with our first haulers and real customers.</p>
      </div>
    </section>

    {/* Founder block */}
    <section style={{ padding: 'clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px)' }}>
      <div style={{ maxWidth: 960, margin: '0 auto' }}>
        <div className="cc-founder" style={{
          background: CC_CARD, border: `1px solid ${CC_BORDER}`,
          borderRadius: 24, padding: 'clamp(28px, 4vw, 48px)',
          display: 'grid', gridTemplateColumns: '200px 1fr', gap: 36,
          alignItems: 'center', boxShadow: CC_SHADOW_RESTING,
        }}>
          <img
            src="/images/AI%20pro%20photo.jpg"
            alt="Logan Rodriguez, founder"
            style={{
              width: 200, height: 200, objectFit: 'cover',
              borderRadius: 20, display: 'block',
              border: `1px solid ${CC_SAGE_BORDER}`,
              boxShadow: CC_SHADOW_ELEVATED,
            }}
          />
          <div>
            <div style={{
              font: '600 11px Inter, system-ui, sans-serif',
              letterSpacing: 1.6, textTransform: 'uppercase',
              color: CC_SAGE, marginBottom: 12,
            }}>The founder</div>
            <h2 style={{
              font: '700 clamp(28px, 4vw, 40px)/1.05 Anton, Oswald, sans-serif',
              textTransform: 'uppercase', letterSpacing: '-0.2px',
              color: '#fff', margin: 0, marginBottom: 6,
            }}>Logan Rodriguez</h2>
            <div style={{
              font: '500 14px Inter, system-ui, sans-serif',
              color: CC_T_TERTIARY, marginBottom: 18,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {CCIcon.pin({ size: 14, color: CC_T_TERTIARY })} Glendora, California
            </div>
            <p style={{
              font: '450 15px/1.7 Inter, system-ui, sans-serif',
              color: CC_T_SECONDARY, margin: 0,
            }}>
              "I started ContainerConnect after seeing how many calls offices handle for dumpster rentals. I wanted to make the process faster, easier, and more automated — for both the customers who need a container and the haulers who deliver them. Every message to support reaches me directly right now."
            </p>
          </div>
        </div>
      </div>
    </section>

    <section style={{ background: CC_SECTION, padding: 'clamp(64px, 10vw, 112px) clamp(24px, 5vw, 64px)' }}>
      <div style={{ maxWidth: 960, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }} className="cc-3col">
          <Pillar title="For customers" body="Stop calling five companies. One form, multiple quotes, real prices. Free for customers, with no broker markup added to your quote." />
          <Pillar title="For haulers" body="Quality leads from verified customers, not lead aggregators. $0 to list, $0 monthly, $0 per lead. We only earn 5% when you complete a job — 3% for founding partners, locked in for life." />
          <Pillar title="For the category" body="Transparent pricing, verified operators, real reviews tied to real bookings. We're building the trust layer dumpster rental has never had." />
        </div>
      </div>
    </section>

    <section style={{ padding: 'clamp(64px, 10vw, 112px) clamp(24px, 5vw, 64px)' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <h2 style={{
          font: '700 clamp(28px, 4vw, 44px)/1.05 Anton, Oswald, sans-serif',
          textTransform: 'uppercase', letterSpacing: '-0.2px',
          color: '#fff', marginBottom: 24,
        }}>What we believe.</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <Value
            t="Transparency beats sales pitches."
            b="Our pricing is published. Our hauler fees are public. Our reviews are tied to completed jobs only. No secret pricing, no asterisks."
          />
          <Value
            t="Operators deserve a fair deal."
            b="Most lead platforms charge haulers $20–60 per lead whether they close or not, then mark up customer prices by 15–30%. We charge $0 to list, $0 per lead, and $0 monthly. Our only revenue is 5% on completed jobs — 3% for founding partners. We win when haulers win, not when customers ghost."
          />
          <Value
            t="A marketplace is a relationship."
            b="We’re not trying to disintermediate the relationship between you and your hauler. After the match, you communicate directly. We stay out of the way."
          />
        </div>
      </div>
    </section>

    <CTABanner
      title="Questions? Want to partner early?"
      body="Drop a message — every one reaches the founder directly right now."
      primary={{ label: 'Contact us', href: 'contact.html' }}
      secondary={{ label: 'List your company', href: 'list-company.html' }}
    />
  </>
);

const Pillar = ({ title, body }) => (
  <div style={{
    background: CC_CARD, border: `1px solid ${CC_BORDER}`,
    borderRadius: 20, padding: '28px 24px',
    boxShadow: CC_SHADOW_RESTING,
  }}>
    <h3 style={{
      font: '700 22px/1.15 Anton, Oswald, sans-serif',
      textTransform: 'uppercase', letterSpacing: '-0.1px',
      color: '#fff', margin: 0, marginBottom: 12,
    }}>{title}</h3>
    <div style={{ font: '450 14px/1.6 Inter, system-ui, sans-serif', color: CC_T_SECONDARY }}>{body}</div>
  </div>
);

const Value = ({ t, b }) => (
  <div style={{
    borderLeft: `3px solid ${CC_SAGE}`, paddingLeft: 20,
  }}>
    <h3 style={{
      font: '700 22px/1.2 Anton, Oswald, sans-serif',
      textTransform: 'uppercase', letterSpacing: '-0.1px',
      color: '#fff', margin: 0, marginBottom: 8,
    }}>{t}</h3>
    <div style={{ font: '450 15px/1.6 Inter, system-ui, sans-serif', color: CC_T_SECONDARY }}>{b}</div>
  </div>
);

// ---------------------------------------------------------------
// CONTACT
// ---------------------------------------------------------------
const ContactPage = () => {
  const [sent, setSent] = React.useState(false);
  if (sent) return <SentState title="Message received." body="Thanks for reaching out. We’ll reply within one business day." />;
  return (
    <>
      <section style={{
        padding: 'clamp(72px, 10vw, 112px) clamp(24px, 5vw, 64px) clamp(48px, 6vw, 80px)',
        textAlign: 'center',
      }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <div style={{ marginBottom: 24 }}>
            <CCTrustPill>Get in touch</CCTrustPill>
          </div>
          <h1 style={{
            font: '700 clamp(40px, 6vw, 64px)/1.05 Anton, Oswald, sans-serif',
            letterSpacing: '-0.3px', textTransform: 'uppercase',
            margin: 0, color: '#fff',
          }}>Talk to us.</h1>
          <p style={{
            font: '450 17px/1.5 Inter, system-ui, sans-serif',
            color: CC_T_SECONDARY, margin: '18px auto 0', maxWidth: 560,
          }}>Customer support, hauler questions, press, partnerships — all roads lead here.</p>
        </div>
      </section>

      <section style={{ padding: '0 clamp(24px, 5vw, 64px) clamp(64px, 10vw, 112px)' }}>
        <div style={{
          maxWidth: 980, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '320px 1fr', gap: 32,
        }} className="cc-contact-grid">
          {/* Info column */}
          <div style={{
            background: CC_CARD, border: `1px solid ${CC_BORDER}`,
            borderRadius: 20, padding: '32px 28px',
            boxShadow: CC_SHADOW_RESTING,
            display: 'flex', flexDirection: 'column', gap: 22,
          }}>
            <InfoRow icon={CCIcon.mail}  label="Email" value="support@containerconnect.com" sub="Fastest response — checked throughout the day" />
            <InfoRow icon={CCIcon.phone} label="Phone" value="(626) 344-0543" sub="Text or call — reaches the founder directly" />
            <InfoRow icon={CCIcon.clock} label="Hours" value="Mon–Fri, 8am–6pm PT" sub="Weekend messages answered Monday" />
            <div style={{
              paddingTop: 18, borderTop: `1px solid ${CC_BORDER}`,
              font: '450 13px/1.55 Inter, system-ui, sans-serif', color: CC_T_TERTIARY,
            }}>
              For urgent hauler support during business hours, partners can reach us directly through the partner dashboard once logged in.
            </div>
          </div>

          {/* Form column */}
          <form
            onSubmit={(e) => {
              e.preventDefault();
              const fd = new FormData(e.target);
              const payload = Object.fromEntries(fd.entries());
              submitToFormspree({
                formType: 'contact',
                subject: `Contact form · ${payload['Your name'] || 'anonymous'}`,
                data: payload,
              });
              setSent(true);
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            style={{
              background: CC_CARD, border: `1px solid ${CC_BORDER}`,
              borderRadius: 20, padding: '32px 28px',
              boxShadow: CC_SHADOW_RESTING,
              display: 'flex', flexDirection: 'column', gap: 16,
            }}
          >
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="cc-form-grid">
              <CCInput label="Your name" placeholder="Jane Smith" required />
              <CCInput label="Email" type="email" placeholder="jane@example.com" required />
            </div>
            <CCSelect label="What’s this about?" options={[
              'General question',
              'Customer support (existing booking)',
              'Hauler partnership',
              'Press / media',
              'Bug or website issue',
              'Something else',
            ]} />
            <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ font: '500 13px Inter, system-ui, sans-serif', color: CC_T_SECONDARY, letterSpacing: 0.2 }}>Message</span>
              <textarea
                name="Message"
                rows={6} required placeholder="Tell us what’s going on..."
                style={{
                  background: CC_SECTION, color: '#fff',
                  border: `1.5px solid ${CC_BORDER}`, borderRadius: 12,
                  padding: '14px 16px',
                  font: '450 15px/1.5 Inter, system-ui, sans-serif',
                  outline: 'none', resize: 'vertical',
                  width: '100%', boxSizing: 'border-box',
                }}
              />
            </label>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
              <button type="submit" style={{
                background: CC_AMBER, color: CC_BASE, border: 0,
                borderRadius: 9999, padding: '13px 28px',
                font: '600 15px Inter, system-ui, sans-serif',
                cursor: 'pointer', boxShadow: CC_AMBER_GLOW,
              }}>Send message →</button>
            </div>
          </form>
        </div>
      </section>
    </>
  );
};

const InfoRow = ({ icon, label, value, sub }) => (
  <div style={{ display: 'flex', gap: 14 }}>
    <div style={{
      width: 40, height: 40, borderRadius: 10, flexShrink: 0,
      background: 'rgba(123,197,127,0.10)', border: `1px solid ${CC_SAGE_BORDER}`,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      color: CC_SAGE,
    }}>{icon({ size: 18, color: CC_SAGE })}</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <div style={{
        font: '600 11px Inter, system-ui, sans-serif',
        letterSpacing: 1.4, textTransform: 'uppercase', color: CC_T_TERTIARY,
      }}>{label}</div>
      <div style={{
        font: '500 15px Inter, system-ui, sans-serif', color: '#fff',
      }}>{value}</div>
      {sub && <div style={{
        font: '450 12px Inter, system-ui, sans-serif', color: CC_T_TERTIARY,
      }}>{sub}</div>}
    </div>
  </div>
);

// ---------------------------------------------------------------
// LEGAL — shared by terms.html and privacy.html
// Pass `kind="terms"` or `kind="privacy"` via query string or prop.
// ---------------------------------------------------------------
const LegalPage = ({ kind }) => {
  const pages = {
    terms: {
      title: 'Terms of service',
      updated: 'Last updated April 2026',
      sections: [
        { h: '1. Agreement to these terms',
          p: 'By accessing, browsing, or using ContainerConnect (the "Service"), you agree to be bound by these Terms of Service ("Terms"). If you do not agree, you may not use the Service. These Terms apply to all visitors, customers requesting quotes, and hauler partners listing on the platform.' },

        { h: '2. What ContainerConnect is — and is not',
          p: 'ContainerConnect is an online marketplace that connects customers seeking dumpster rentals with independent local hauler companies. ContainerConnect does not own, operate, lease, or directly provide any dumpster, truck, or waste-hauling service. We do not employ the haulers listed on the platform. Each hauler is an independent business, solely responsible for its own pricing, scheduling, delivery, pickup, insurance, licensing, and the quality of the services it provides.' },

        { h: '3. Eligibility',
          p: 'You must be at least 18 years old and capable of entering into a binding contract in your jurisdiction to request quotes, list a company, or otherwise use the Service. By using the Service you represent that you meet these requirements and that any information you provide is accurate and not misleading.' },

        { h: '4. Quote requests and bookings',
          p: 'When you submit a quote request, ContainerConnect routes the request to one or more hauler partners in your area. Any quote, booking, contract, or transaction you enter into with a hauler is strictly between you and that hauler. ContainerConnect is not a party to any rental agreement between customer and hauler, does not process payments between customer and hauler, and does not guarantee the availability, quality, price, timeliness, or outcome of any service rendered.' },

        { h: '5. Hauler partner terms',
          p: 'Hauler partners who list on ContainerConnect agree, in addition to these Terms, to the pricing model published on the For Haulers page. Listing is free for all approved haulers — there is no monthly fee, no setup fee, and no per-lead charge. ContainerConnect earns a 5% commission on completed and paid bookings only (3% for founding partners — the first 25 haulers approved during our launch cohort, with that rate locked in for as long as the partner remains listed). Cancelled, refunded, no-show, and unconverted leads are not subject to any fee. Customers pay haulers directly; ContainerConnect does not process payment for any rental. Commission is invoiced after the hauler self-reports completion of the job in the partner dashboard. Haulers remain responsible for all licensing, insurance, taxes, employment, environmental, and safety obligations applicable to their business. Pricing changes will be communicated to listed haulers at least 60 days before taking effect. Additional partner-specific terms may be presented during the application process.' },

        { h: '6. Prohibited use',
          p: 'You agree not to: (a) misrepresent your identity or the nature of your project; (b) submit fraudulent, duplicate, or automated quote requests; (c) scrape, copy, or reproduce platform content without permission; (d) interfere with, disrupt, or attempt to gain unauthorized access to the Service or its related systems; (e) use the Service to transmit spam, malware, or unlawful content; or (f) use the Service for any purpose that violates local, state, federal, or international law. Violations may result in immediate suspension or termination of access.' },

        { h: '7. Intellectual property',
          p: 'All content on the Service — including the ContainerConnect name, logo, graphics, site design, copy, and source code — is owned by ContainerConnect or its licensors and is protected by applicable intellectual property laws. You may not copy, modify, distribute, sell, or lease any part of the Service without prior written permission. Limited personal, non-commercial use of the platform is permitted as necessary to request a quote or interact with hauler partners.' },

        { h: '8. User content',
          p: 'If you submit content to ContainerConnect — photos, project descriptions, reviews, or other materials — you retain ownership but grant ContainerConnect a non-exclusive, worldwide, royalty-free license to use, display, and distribute that content as necessary to operate the Service. You represent that you have the right to share the content you submit and that it does not violate any third-party rights.' },

        { h: '9. Third-party services',
          p: 'The Service integrates with third-party providers including, but not limited to, Formspree (form submissions), Vercel (hosting), and may in the future include Supabase (authentication and data storage), Stripe (payments), or analytics providers. Your use of the Service involves transmission of data to and from these providers, each of which operates under its own terms of service and privacy policy.' },

        { h: '10. Disclaimer of warranties',
          p: 'THE SERVICE IS PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. CONTAINERCONNECT DOES NOT WARRANT THE ACCURACY, RELIABILITY, OR AVAILABILITY OF THE SERVICE, NOR THE CONDUCT, QUALITY, SAFETY, OR LEGAL COMPLIANCE OF ANY HAULER LISTED ON THE PLATFORM.' },

        { h: '11. Limitation of liability',
          p: 'TO THE MAXIMUM EXTENT PERMITTED BY LAW, CONTAINERCONNECT, ITS OFFICERS, EMPLOYEES, AND AFFILIATES SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, CONSEQUENTIAL, SPECIAL, OR PUNITIVE DAMAGES ARISING OUT OF OR RELATED TO YOUR USE OF THE SERVICE, INCLUDING LOSS OF PROFITS, DATA, OR GOODWILL, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. CONTAINERCONNECT\'S TOTAL AGGREGATE LIABILITY FOR ANY CLAIM ARISING FROM OR RELATED TO THE SERVICE SHALL NOT EXCEED ONE HUNDRED U.S. DOLLARS ($100).' },

        { h: '12. Indemnification',
          p: 'You agree to defend, indemnify, and hold harmless ContainerConnect and its affiliates from any claims, liabilities, damages, losses, or expenses (including reasonable attorneys\' fees) arising from your violation of these Terms, your misuse of the Service, or your interactions with any hauler or customer encountered through the Service.' },

        { h: '13. Termination',
          p: 'We may suspend or terminate your access to the Service at any time, with or without notice, for any reason including violation of these Terms. Upon termination, your right to use the Service ends immediately. Provisions that by their nature should survive termination (including intellectual property, disclaimers, liability limits, and indemnification) will survive.' },

        { h: '14. Changes to these terms',
          p: 'We may update these Terms from time to time. The "Last updated" date at the top reflects the most recent revision. Material changes will be communicated via a notice on the Service or by email. Your continued use of the Service after changes take effect constitutes acceptance of the revised Terms.' },

        { h: '15. Governing law and disputes',
          p: 'These Terms are governed by the laws of the State of California, USA, without regard to conflict-of-laws principles. Any dispute arising from these Terms or the Service shall be resolved in the state or federal courts located in California, and you consent to the exclusive jurisdiction of those courts.' },

        { h: '16. Contact',
          p: 'Questions about these Terms can be sent to support@containerconnect.com.' },
      ],
    },
    privacy: {
      title: 'Privacy policy',
      updated: 'Last updated April 2026',
      sections: [
        { h: '1. Our approach',
          p: 'ContainerConnect is a marketplace that connects customers with local dumpster rental companies. We collect the minimum information needed to match you with haulers and to operate the Service. We do not sell your personal information. We do not share it with any third party except as described below or as required by law.' },

        { h: '2. Information you provide directly',
          p: 'When you request a quote, sign up as a hauler, contact us, or join a waitlist, you provide information such as: name, email address, phone number, ZIP code and city, project type and size, optional photos of debris or job site, preferred delivery date, and hauler-specific details (business name, license number, insurance details, service area, fleet size). All of this is voluntary — you control what you share.' },

        { h: '3. Information collected automatically',
          p: 'When you visit the Service, our infrastructure providers may log standard web information such as IP address, browser type and version, device type, referring URL, pages viewed, and time of visit. This information is used to operate the Service, debug issues, and understand usage patterns in aggregate.' },

        { h: '4. How we use your information',
          p: 'We use the information we collect to: (a) route your quote request to hauler partners in your area; (b) enable hauler partners to respond to you directly; (c) deliver service-related email and communications; (d) respond to support requests; (e) improve the Service and develop new features; and (f) comply with legal obligations. We do not use your information for third-party advertising or retargeting.' },

        { h: '5. Sharing with hauler partners',
          p: 'When you submit a quote request, we share your name, email, phone, ZIP, and project details with the hauler partners we match you with so they can respond with a quote. We do not share your information with any hauler you have not been matched with. Hauler partners agree to use this information only to respond to your quote request, not for unrelated marketing.' },

        { h: '6. Third-party service providers',
          p: 'We rely on a small set of trusted service providers to run the Service. At this time these include Formspree (form submission delivery and email routing), Vercel (website hosting and content delivery), and Google Fonts (typography). In the future this may expand to include Supabase (database and authentication), Stripe (payment processing for hauler revenue-share), and basic analytics. Each provider operates under its own privacy policy and processes your data only as needed to perform services for us.' },

        { h: '7. What we do not do',
          p: 'We do not sell your personal information. We do not rent or trade customer lists. We do not share your data with haulers you have not requested a match with. We do not use your information for behavioral advertising on other websites. We do not track you across the internet via third-party pixels.' },

        { h: '8. Cookies and similar technologies',
          p: 'We use a minimal set of cookies for essential functionality (such as remembering your form progress) and, if we enable analytics in the future, to understand how the Service is used in aggregate. You can disable cookies in your browser settings, though some parts of the Service may not work correctly without them. The Service does not currently use advertising cookies.' },

        { h: '9. Your rights and choices',
          p: 'You can request a copy of the personal data we hold about you, request correction of inaccurate data, or request deletion of your information at any time by emailing support@containerconnect.com. We will respond within a reasonable time frame. California residents have additional rights under the California Consumer Privacy Act (CCPA), including the right to know what categories of personal information we collect and to opt out of any sale (we do not sell data). EU/UK residents have rights under GDPR, including the right to object to processing or request data portability.' },

        { h: '10. Data retention',
          p: 'We retain personal information only as long as needed to provide the Service, complete a quote request, maintain a hauler partnership, or satisfy legal or accounting obligations. Quote requests are generally retained for up to two years after submission; hauler partner records are retained for the duration of the partnership plus a reasonable period afterward.' },

        { h: '11. Children\'s privacy',
          p: 'The Service is not directed to individuals under 18 years of age, and we do not knowingly collect information from minors. If you believe a minor has provided us with personal information, please contact us and we will delete it.' },

        { h: '12. Security',
          p: 'We use industry-standard technical and administrative measures to protect your data — including encryption in transit (HTTPS), encryption at rest where supported by our providers, and limiting access to data on a need-to-know basis. No system is perfectly secure. We do not guarantee absolute security but will notify affected users of any material breach as required by applicable law.' },

        { h: '13. International data transfers',
          p: 'The Service is hosted in the United States. If you access the Service from outside the U.S., your information will be transferred to and processed in the U.S. By using the Service, you consent to this transfer.' },

        { h: '14. Changes to this policy',
          p: 'We may update this Privacy Policy from time to time. The "Last updated" date at the top reflects the most recent revision. Material changes will be communicated via a notice on the Service or by email. Your continued use of the Service after changes take effect constitutes acceptance of the updated policy.' },

        { h: '15. Contact',
          p: 'Questions about this Privacy Policy, or requests related to your personal information, can be sent to support@containerconnect.com.' },
      ],
    },
  };
  const p = pages[kind];
  return (
    <section style={{ padding: 'clamp(72px, 10vw, 112px) clamp(24px, 5vw, 64px) clamp(64px, 10vw, 112px)' }}>
      <div style={{ maxWidth: 780, margin: '0 auto' }}>
        {/* Placeholder disclaimer banner */}
        <div style={{
          padding: '14px 20px', marginBottom: 32,
          background: 'rgba(245,196,67,0.08)',
          border: '1px solid rgba(245,196,67,0.3)',
          borderRadius: 12,
          font: '500 13px/1.55 Inter, system-ui, sans-serif',
          color: '#F5C443',
        }}>
          <strong>Placeholder copy.</strong> This page is a structural draft for development. Finalized legal language will be reviewed by counsel before public launch.
        </div>

        <div style={{
          font: '600 11px Inter, system-ui, sans-serif',
          letterSpacing: 1.6, textTransform: 'uppercase',
          color: CC_T_TERTIARY, marginBottom: 12,
        }}>{p.updated}</div>
        <h1 style={{
          font: '700 clamp(36px, 5.5vw, 56px)/1.05 Anton, Oswald, sans-serif',
          textTransform: 'uppercase', letterSpacing: '-0.3px',
          color: '#fff', margin: 0, marginBottom: 32,
        }}>{p.title}</h1>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {p.sections.map((s, i) => (
            <div key={i}>
              <h2 style={{
                font: '700 20px/1.2 Anton, Oswald, sans-serif',
                textTransform: 'uppercase', letterSpacing: '-0.1px',
                color: '#fff', margin: 0, marginBottom: 10,
              }}>{s.h}</h2>
              <p style={{
                font: '450 15px/1.65 Inter, system-ui, sans-serif',
                color: CC_T_SECONDARY, margin: 0,
              }}>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// WAITLIST — shared by sign-in.html and partner-login.html
// ---------------------------------------------------------------
const WaitlistPage = ({ kind }) => {
  const [joined, setJoined] = React.useState(false);
  const config = {
    customer: {
      title: 'Sign in launches soon.',
      sub: 'Customer accounts are in development. For now, you can request a quote without an account — we’ll send your matches by email.',
      cta: { label: 'Get a free quote', href: 'quote.html' },
      badge: 'Customer accounts',
      waitlist: 'Get notified when customer accounts launch',
    },
    partner: {
      title: 'Partner portal launches soon.',
      sub: 'Hauler dashboards, lead routing, and payout tracking are being built. Already an approved hauler? Leads are being sent to your email on file while the portal is in development.',
      cta: { label: 'List your company', href: 'list-company.html' },
      badge: 'Partner portal',
      waitlist: 'Get notified when the partner dashboard launches',
    },
  }[kind];

  return (
    <section style={{
      padding: 'clamp(72px, 10vw, 120px) clamp(24px, 5vw, 64px) clamp(64px, 10vw, 112px)',
      textAlign: 'center', position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 900px 500px at center top, rgba(63,122,77,0.15) 0%, transparent 65%)',
      }}/>
      <div style={{ position: 'relative', maxWidth: 560, margin: '0 auto' }}>
        <div style={{
          width: 72, height: 72, borderRadius: 18, margin: '0 auto 28px',
          background: 'rgba(123,197,127,0.10)', border: `1px solid ${CC_SAGE_BORDER}`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: CC_SAGE,
        }}>{CCIcon.clock({ size: 32, color: CC_SAGE })}</div>

        <div style={{ marginBottom: 20 }}>
          <CCTrustPill>{config.badge} · coming soon</CCTrustPill>
        </div>

        <h1 style={{
          font: '700 clamp(32px, 4.5vw, 48px)/1.1 Anton, Oswald, sans-serif',
          textTransform: 'uppercase', letterSpacing: '-0.3px',
          color: '#fff', margin: 0, marginBottom: 20,
        }}>{config.title}</h1>

        <p style={{
          font: '450 16px/1.6 Inter, system-ui, sans-serif',
          color: CC_T_SECONDARY, margin: '0 auto 32px',
        }}>{config.sub}</p>

        {/* Primary action */}
        <div style={{ marginBottom: 40 }}>
          <CCButtonAmber href={config.cta.href} size="md">{config.cta.label}</CCButtonAmber>
        </div>

        {/* Waitlist */}
        {!joined ? (
          <form
            onSubmit={(e) => {
              e.preventDefault();
              const email = e.target.querySelector('input[type="email"]').value;
              submitToFormspree({
                formType: `waitlist-${kind}`,
                subject: `Waitlist signup · ${kind}`,
                data: { email, audience: kind },
              });
              setJoined(true);
            }}
            style={{
              background: CC_CARD, border: `1px solid ${CC_BORDER}`,
              borderRadius: 16, padding: '24px',
              boxShadow: CC_SHADOW_RESTING,
              textAlign: 'left',
            }}
          >
            <div style={{
              font: '600 11px Inter, system-ui, sans-serif',
              letterSpacing: 1.4, textTransform: 'uppercase',
              color: CC_T_TERTIARY, marginBottom: 12,
            }}>{config.waitlist}</div>
            <div style={{ display: 'flex', gap: 8 }}>
              <input
                type="email" required placeholder="you@example.com"
                style={{
                  flex: 1, background: CC_SECTION, color: '#fff',
                  border: `1.5px solid ${CC_BORDER}`, borderRadius: 12,
                  padding: '12px 16px',
                  font: '450 14px Inter, system-ui, sans-serif', outline: 'none',
                }}
              />
              <button type="submit" style={{
                background: CC_SAGE, color: CC_BASE, border: 0,
                borderRadius: 12, padding: '0 20px',
                font: '600 14px Inter, system-ui, sans-serif',
                cursor: 'pointer', whiteSpace: 'nowrap',
              }}>Notify me</button>
            </div>
          </form>
        ) : (
          <div style={{
            background: 'rgba(123,197,127,0.08)',
            border: `1px solid ${CC_SAGE_BORDER}`,
            borderRadius: 16, padding: '20px 24px',
            display: 'flex', alignItems: 'center', gap: 12,
            justifyContent: 'center',
            font: '500 14px Inter, system-ui, sans-serif',
            color: CC_SAGE,
          }}>
            {CCIcon.check({ size: 18, color: CC_SAGE, stroke: 2.5 })}
            You’re on the list. We’ll email you the moment it’s ready.
          </div>
        )}
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Shared bits
// ---------------------------------------------------------------
const CTABanner = ({ title, body, primary, secondary }) => (
  <section style={{ padding: 'clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px)' }}>
    <div style={{ maxWidth: 960, margin: '0 auto' }}>
      <div style={{
        background: `linear-gradient(135deg, ${CC_ELEV} 0%, ${CC_CARD} 100%)`,
        border: `1px solid ${CC_BORDER}`,
        borderRadius: 24, padding: 'clamp(32px, 5vw, 56px)',
        textAlign: 'center', boxShadow: CC_SHADOW_ELEVATED,
      }}>
        <h2 style={{
          font: '700 clamp(28px, 4vw, 40px)/1.1 Anton, Oswald, sans-serif',
          textTransform: 'uppercase', letterSpacing: '-0.2px',
          color: '#fff', margin: 0,
        }}>{title}</h2>
        <p style={{
          font: '450 16px/1.5 Inter, system-ui, sans-serif',
          color: CC_T_SECONDARY, margin: '16px auto 24px', maxWidth: 500,
        }}>{body}</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <CCButtonAmber href={primary.href} size="md">{primary.label}</CCButtonAmber>
          {secondary && <CCButtonGhost href={secondary.href} size="md">{secondary.label}</CCButtonGhost>}
        </div>
      </div>
    </div>
  </section>
);

const SentState = ({ title, body }) => (
  <section style={{
    padding: 'clamp(80px, 12vw, 140px) clamp(24px, 5vw, 64px)',
    textAlign: 'center', minHeight: '60vh',
  }}>
    <div style={{ maxWidth: 560, margin: '0 auto' }}>
      <div style={{
        width: 72, height: 72, borderRadius: 9999, margin: '0 auto 24px',
        background: 'rgba(123,197,127,0.12)', border: `2px solid ${CC_SAGE_BORDER}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: CC_SAGE,
      }}>{CCIcon.check({ size: 32, color: CC_SAGE, stroke: 2.5 })}</div>
      <h1 style={{
        font: '700 clamp(32px, 5vw, 48px)/1.05 Anton, Oswald, sans-serif',
        textTransform: 'uppercase', letterSpacing: '-0.3px',
        color: '#fff', margin: 0,
      }}>{title}</h1>
      <p style={{
        font: '450 16px/1.55 Inter, system-ui, sans-serif',
        color: CC_T_SECONDARY, margin: '20px auto 28px',
      }}>{body}</p>
      <CCButtonAmber href="/" size="md">Return home</CCButtonAmber>
    </div>
  </section>
);

Object.assign(window, { AboutPage, ContactPage, LegalPage, WaitlistPage });