// ============================================================
//  Cumulus Homepage — static sections (Cumulus Insurance Australia).
//  Reskin of the QBE prototype: same layout, same component tree,
//  Cumulus brand identity. Rendered UNDER the agentic overlay.
// ============================================================

function QbeAlertBar() {
  const [show, setShow] = React.useState(true);
  if (!show) return null;
  return (
    <div className="qbe-alert">
      <span className="dot">i</span>
      <span>Affected by extreme weather and need assistance?</span>
      <u>Read more</u>
      <span className="close" onClick={() => setShow(false)}>✕</span>
    </div>
  );
}

function QbeHeader({ onOpenAssistant }) {
  const items = ['Car & vehicle', 'CTP', 'Home', 'Business', 'Claims', 'Customer'];
  return (
    <div className="qbe-nav">
      <a href="#" className="logo-wrap" onClick={e => e.preventDefault()}>
        <img src="assets/cumulus-logo-insurance-white.png" alt="Cumulus Insurance" style={{ height: 28 }} />
      </a>
      {items.map((it, i) => (
        <a key={it} href="#" onClick={e => e.preventDefault()} className={i === 0 ? 'active' : ''}>
          {it}
        </a>
      ))}
      <div className="right">
        <button className="iconbtn iconbtn--search" onClick={onOpenAssistant} title="Ask Cumulus Assistant" aria-label="Search Cumulus">
          <span className="iconbtn__glyph">{FilledIcons.searchFilled}</span>
        </button>
        <a href="#" className="contact" onClick={e => e.preventDefault()}>
          <Icon name="phone" size={14} style={{marginRight: 6}} /> Contact us
        </a>
        <span className="cta">
          <Icon name="arrowRight" size={14} /> Brokers &amp; Partners
        </span>
      </div>
    </div>
  );
}

function QbeHero({ onOpenAssistant }) {
  return (
    <section className="hero cumulus-stripe-corner cumulus-stripe-corner--tr" aria-label="Hero">
      <div className="bg" style={{ backgroundImage: "url('assets/hero-family.jpg')" }} />
      <div className="grad" />
      <div className="inner">
        <div>
          <h1>At the heart of{'\n'}providing protection{'\n'}for things that matter</h1>
          <p className="sub">ANZIIF Large General Insurance Company of the Year 2025</p>
          <div className="tri">
            <img src="assets/cumulus-cloud.png" alt="" style={{ width: 140, height: 'auto', opacity: 0.95 }} />
          </div>
        </div>
        <div className="quote-panel">
          <h3>Get a quote</h3>
          {[
            { icon: 'shield', label: 'CTP NSW' },
            { icon: 'car',    label: 'Car', primary: true },
            { icon: 'zap',    label: 'Motorcycle' },
            { icon: 'home',   label: 'Home and contents' },
          ].map((row, i) => (
            <div key={row.label} className="row" onClick={row.primary ? onOpenAssistant : undefined}>
              <Icon name={row.icon} className="icon" size={20} color="var(--cumulus-blue)" />
              {row.label}
              <Icon name="chevronRight" className="arrow" size={16} color="var(--cumulus-blue)" />
            </div>
          ))}
          <div className="retrieve">
            <Icon name="fileText" size={18} />
            Retrieve your quote
            <Icon name="arrowRight" size={16} className="arrow" />
          </div>
        </div>
      </div>
    </section>
  );
}

function WhyChooseQbe() {
  const cards = [
    { img: 'assets/home-contents.jpg', title: 'Home & contents', desc: "We've been highly commended as Finder Best Comprehensive Home Insurance in 2025-26.", link: 'Find out more' },
    { img: 'assets/car-mirror.jpg',    title: 'Motorcycle', desc: 'Real value-for-money comprehensive motorcycle insurance.', link: 'Find out more' },
    { img: 'assets/cumulus-hero-auto.png', title: 'Car', desc: 'Hand-picked, Australia-wide network of accredited smash repairers.', link: 'Find out more' },
  ];

  const bottom = [
    { img: 'assets/cumulus-hero-auto.png', title: 'Car insurance',
      desc: "You can be confident that if things go wrong, we'll go all-out to get you moving again — with maximum speed and minimum disruption.",
      links: ['Comprehensive car insurance', 'Third party property damage', 'Car insurance reviews'],
      cta: 'Save $75 on car insurance', highlight: true },
    { img: 'assets/cumulus-hero-bundle.png', title: 'Home insurance',
      desc: "Homeowner, renter or landlord, we can cover your home and contents for scenarios you've thought of — and some you probably haven't.",
      links: ['Contents insurance', 'Home and contents', 'Landlord insurance', 'Home insurance reviews'],
      cta: 'Save 35% on home insurance' },
    { img: 'assets/woman-home-office.jpg', title: 'Business insurance',
      desc: "While we can't prevent the unexpected, we can help you protect your business with confidence.",
      links: ['Business insurance products', 'Small business insurance'],
      cta: 'Get a small business quote' },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="why-head">
          <h2>Why choose Cumulus insurance?</h2>
          <p>We've been insuring Australians for 140 years.</p>
        </div>

        <div className="qbe-card-grid">
          {cards.map(c => (
            <div key={c.title} className="qbe-card">
              <img src={c.img} alt={c.title} className="img" />
              <div className="body">
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <a href="#" onClick={e => e.preventDefault()}>{c.link}</a>
              </div>
            </div>
          ))}
        </div>

        <div className="qbe-card-grid" style={{ marginTop: 24 }}>
          {bottom.map(c => (
            <div key={c.title} className="qbe-card">
              <img src={c.img} alt={c.title} className="img" />
              <div className="body">
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <div className="linklist">
                  {c.links.map(l => <a key={l} href="#" onClick={e => e.preventDefault()}>{l}</a>)}
                </div>
                <button className="btn">{c.cta}</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeefoBand() {
  const cells = [
    { score: '4.6/5', meta: 'Independent Service Rating based on 17968 verified reviews', brand: 'feefo' },
    { stars: '★★★★★', quote: 'Very good price level', meta: 'Trusted Customer, 14 Apr 2026' },
    { stars: '★★★★☆', quote: 'Simple', meta: 'Trusted Customer, 12 Apr 2026' },
    { stars: '★★★★★', quote: 'All OK +', meta: 'R C Wren, 14 Apr 2026' },
  ];
  return (
    <div className="container">
      <div className="feefo">
        <div className="feefo-row">
          {cells.map((c, i) => (
            <div key={i} className="feefo-cell">
              {c.score && <>
                <div className="feefo-score">{c.score}</div>
                <div style={{ fontSize: 10, color: 'var(--cumulus-gray-600)' }}>Platinum Trusted Service 2024</div>
                <div className="feefo-meta">{c.meta}</div>
                <div style={{ fontStyle: 'italic', color: 'var(--cumulus-blue)', marginTop: 4, fontSize: 14, fontWeight: 700 }}>feefo<sup>ᴼ</sup></div>
                <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 12, color: 'var(--cumulus-blue)', textDecoration: 'underline' }}>Read all reviews</a>
              </>}
              {c.stars && <>
                <div className="feefo-stars">{c.stars}</div>
                <div className="feefo-quote">{c.quote}</div>
                <div className="feefo-meta">{c.meta}</div>
              </>}
            </div>
          ))}
          <Icon name="chevronRight" size={28} color="var(--cumulus-gray-600)" />
        </div>
      </div>
    </div>
  );
}

function Awards() {
  const items = [
    { icon: '🏆', title: "Australia's Green Insurer of the Year 2024", desc: "For the fifth year running we've been named by Finder as Australia's Green Insurer of the Year. We're honoured to be recognised as an industry leader in this area." },
    { icon: '★',  title: "Finder's Best Rated National Car Insurance Brand 2021/2022", desc: "We've been awarded Finder's best-rated National Car Insurance Brand for Customer Satisfaction in 2021/2022." },
    { icon: '🏅', title: 'Platinum Trusted Service Award 2024', desc: 'This annual award acknowledges outstanding service based on customer ratings. Our Feefo award helps consumers buy policy with confidence, and shows customers we listen, care and can be trusted.' },
  ];
  return (
    <section className="awards container">
      <h2>Award-winning insurance</h2>
      <div className="awards-grid">
        {items.map((it, i) => (
          <div key={i} className="award-card">
            <div className="icon">{it.icon}</div>
            <h3>{it.title}</h3>
            <p>{it.desc}</p>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 24 }}>
        {[0,1,2,3,4].map(i => (
          <span key={i} style={{ width: 8, height: 8, borderRadius: 4, background: i === 1 ? 'var(--cumulus-blue)' : 'var(--cumulus-gray-250)' }} />
        ))}
      </div>
    </section>
  );
}

function HelpAndSupport() {
  return (
    <section className="help-band">
      <div className="container help-inner">
        <div>
          <h2>Help and support</h2>
          <p>Help and information for customers with an insurance policy purchased direct from Cumulus: request your certificate of currency, make a payment, make a claim, or renew your policy. Received a communication from us about a remediation payment?</p>
          <button className="btn">Customer Hub</button>
        </div>
        <img className="photo" src="assets/woman-home-office.jpg" alt="Woman on laptop at home" />
      </div>
    </section>
  );
}

function QbeFooter() {
  const cols = [
    { title: 'Company', links: ['About Cumulus', 'Careers', 'Investors', 'Media enquiries', 'Cumulus in the community'] },
    { title: 'Legal & governance', links: ['Complaints and feedback', 'Consumer FSG', 'Privacy policy', 'Responsible disclosure', 'Sitemap', 'Website terms', 'Whistleblowing'] },
    { title: 'Industry news & alerts', links: ['Blog', 'Bushfire preparedness advice', 'Natural disasters and weather alerts', 'Weather alerts'] },
    { title: 'Follow us', links: ['Facebook', 'LinkedIn', 'YouTube'] },
  ];
  return (
    <footer>
      <img className="triangle" src="assets/cumulus-cloud.png" alt="Cumulus" />
      <div className="inner">
        <img src="assets/cumulus-logo-insurance-white.png" alt="Cumulus Insurance" style={{ height: 36, marginBottom: 24, display: 'block' }} />
        <div className="cols">
          {cols.map(col => (
            <div key={col.title}>
              <h4>{col.title}</h4>
              <ul>
                {col.links.map(l => (
                  <li key={l}><a href="#" onClick={e => e.preventDefault()}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="legal">
        <div className="inner">
          <p style={{ fontWeight: 600, marginBottom: 4 }}>🇦🇺 Australia</p>
          <p>© Copyright 2026 Cumulus Insurance (Australia) Ltd. All rights reserved. ABN 78 003 191 035 • AFSL 239545.</p>
          <p>Terms &amp; conditions apply. Normal underwriting terms and conditions apply. Any advice provided is general only and has been prepared without taking into account your objectives, financial situation or needs and may not be right for you. Please read the Policy Wording or Product Disclosure Statement (PDS) and Target Market Determination (TMD) to decide if a product is right for you.</p>
          <p>Cumulus acknowledges the Traditional Owners and Custodians of the lands on which we live and work across Australia and pays respect to the ongoing connection to land and waters to the Aboriginal custodians of land. We pay our respects to Elders past, present and future.</p>
        </div>
      </div>
    </footer>
  );
}

function QbeHomepage({ onOpenAssistant }) {
  return (
    <div>
      <QbeAlertBar />
      <QbeHeader onOpenAssistant={onOpenAssistant} />
      <QbeHero onOpenAssistant={onOpenAssistant} />
      <WhyChooseQbe />
      <FeefoBand />
      <Awards />
      <HelpAndSupport />
      <QbeFooter />
    </div>
  );
}

Object.assign(window, { QbeHomepage, QbeHeader, QbeHero, QbeAlertBar });