// Larkspur — Loans & Finance Service Page

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "navy"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  navy:    { brand: '#1a3a8f', deep: '#0f1f4a', soft: '#e7ebf6' },
  forest:  { brand: '#0d3b2e', deep: '#072018', soft: '#dce8e2' },
  bronze:  { brand: '#7a4a1a', deep: '#42260c', soft: '#efe4d4' },
  ink:     { brand: '#1a1a1a', deep: '#000000', soft: '#e8e8e8' },
  plum:    { brand: '#4a1a4a', deep: '#2a0d2a', soft: '#ece0ec' },
};

const ServiceApp = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookOpen, setBookOpen] = React.useState(false);
  const [activeTab, setActiveTab] = React.useState('overview');

  React.useEffect(() => {
    const p = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.navy;
    document.documentElement.style.setProperty('--brand', p.brand);
    document.documentElement.style.setProperty('--brand-deep', p.deep);
    document.documentElement.style.setProperty('--brand-soft', p.soft);
  }, [tweaks.accent]);

  return (
    <>
      <Header active="services" onBook={() => setBookOpen(true)} />
      <main>
        <ServiceHero onBook={() => setBookOpen(true)} />
        <Problems />
        <Approach activeTab={activeTab} setActiveTab={setActiveTab}/>
        <Process />
        <Outcomes />
        <Lenders />
        <ServiceCTA onBook={() => setBookOpen(true)} />
      </main>
      <Footer />
      <StickyCTA onClick={() => setBookOpen(true)} />
      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} context="lending" />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[
              { value: 'navy', label: 'Navy' },
              { value: 'forest', label: 'Forest' },
              { value: 'bronze', label: 'Bronze' },
              { value: 'ink', label: 'Ink' },
              { value: 'plum', label: 'Plum' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

const ServiceHero = ({ onBook }) => (
  <section className="service-hero" data-screen-label="01 Service Hero">
    <div className="container">
      <div className="breadcrumb">
        <a href="index.html">Home</a>
        <span className="sep">/</span>
        <a href="#">Services</a>
        <span className="sep">/</span>
        <span className="current">Loans &amp; finance strategy</span>
      </div>
      <div className="service-hero-grid">
        <div>
          <span className="eyebrow">Service · Lending</span>
          <h1 style={{marginTop:24}}>Loans &amp; <span style={{color:'var(--brand)'}}>finance strategy</span> built to compound.</h1>
          <p className="lead" style={{marginTop:24, color:'var(--ink-2)', maxWidth:560}}>
            Most brokers chase rates. We design the lending architecture for your next 10 years — so each loan sets up the one after it, not blocks it.
          </p>
          <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
            <button className="btn btn-primary btn-lg" onClick={onBook}>
              Book a lending strategy review
              <span className="arrow"><Icon name="arrow-right" size={14}/></span>
            </button>
            <a href="calculator.html" className="btn btn-ghost btn-lg">
              <Icon name="calc" size={16}/>
              Try the borrowing calculator
            </a>
          </div>
          <div style={{marginTop:48, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, paddingTop:32, borderTop:'1px solid var(--line)'}}>
            <div>
              <div style={{fontSize:32, fontWeight:460, letterSpacing:'-0.02em'}}>35+</div>
              <div style={{fontSize:13, color:'var(--muted)', marginTop:4}}>Lenders on panel</div>
            </div>
            <div>
              <div style={{fontSize:32, fontWeight:460, letterSpacing:'-0.02em'}}>$1.2B</div>
              <div style={{fontSize:13, color:'var(--muted)', marginTop:4}}>Settled since 2011</div>
            </div>
            <div>
              <div style={{fontSize:32, fontWeight:460, letterSpacing:'-0.02em'}}>97%</div>
              <div style={{fontSize:13, color:'var(--muted)', marginTop:4}}>Approval rate</div>
            </div>
          </div>
        </div>
        <div style={{position:'sticky', top:100}}>
          <div style={{borderRadius:'var(--radius-lg)', overflow:'hidden', aspectRatio:'4/5'}}>
            <Placeholder label="Adviser at desk — close-up" tone="navy"/>
          </div>
          <div style={{marginTop:16, background:'var(--ink)', color:'#fff', borderRadius:'var(--radius-lg)', padding:24, display:'flex', alignItems:'center', gap:16}}>
            <div style={{flex:1}}>
              <div style={{fontSize:12, color:'rgba(255,255,255,0.6)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Free download</div>
              <div style={{fontSize:16, fontWeight:500, marginTop:6}}>The Investor Lending Playbook</div>
              <div style={{fontSize:13, color:'rgba(255,255,255,0.6)', marginTop:4}}>32-page PDF · 2026 edition</div>
            </div>
            <button className="btn btn-sm" style={{background:'var(--sand)', color:'var(--brand-deep)'}}>
              <Icon name="download" size={14}/>
              Get it
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Problems = () => {
  const items = [
    { num: '01', title: 'Capacity is hit too early', desc: 'Each loan was structured in isolation — and now the bank says no on the next one. Common, and almost always fixable upstream.' },
    { num: '02', title: 'Rate-chasing without strategy', desc: 'You\'ve refinanced twice in three years for a 0.2% saving and zero structural improvement. We optimise both.' },
    { num: '03', title: 'Wrong product for the goal', desc: 'IO vs P&I, offset, redraw, debt recycling, cross-collateralisation — small choices, decades of compounding cost.' },
  ];
  return (
    <section data-screen-label="02 Problems we solve">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Problems we solve</span>
            <h2 style={{marginTop:16}}>If you've heard "computer says no" and didn't know why — we should talk.</h2>
          </div>
          <div className="head-meta">
            <p>The most expensive loans aren't the ones with the highest rates. They're the ones that block your next move. Here's where we usually find leverage.</p>
          </div>
        </div>
        <div className="problem-grid">
          {items.map((p, i) => (
            <div key={i} className="problem-card">
              <span className="num">{p.num}</span>
              <h4>{p.title}</h4>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Approach = ({ activeTab, setActiveTab }) => {
  const tabs = [
    { id: 'overview', label: 'Overview' },
    { id: 'investors', label: 'For property investors' },
    { id: 'home', label: 'For first/next home buyers' },
    { id: 'refi', label: 'For refinancing' },
    { id: 'business', label: 'For business owners' },
  ];
  const content = {
    overview: {
      title: 'A lending architecture, not just a loan.',
      body: 'We start with the picture in 10 years and work backwards. What\'s the portfolio target? What capacity headroom is needed? Which structure protects flexibility? Only then do we shop product and rate — and we shop hard, across 35+ lenders.',
      points: ['10-year capacity model', 'Structure-first product selection', 'Cross-team coordination with tax', 'Lender shortlist with reasoning'],
    },
    investors: {
      title: 'Built around how lenders actually assess investors.',
      body: 'Servicing rules, rental shading, negative gearing add-backs, equity release sequencing — investor lending is a specialist game and we play it constantly.',
      points: ['Property portfolio capacity modelling', 'IO interest, debt recycling, offsets', 'Equity release without cross-coll', 'Tax-aligned ownership structures'],
    },
    home: {
      title: 'Your first home should not block your second.',
      body: 'A first home loan structured wrong can cost you the next purchase. We design the original loan with future moves in mind — so you don\'t pay for it later.',
      points: ['First Home Buyer schemes', 'Future-proof structure', 'Genuine savings strategy', 'Pre-approval coordination'],
    },
    refi: {
      title: 'Refinance for a reason — not for a rate.',
      body: 'A refinance is a chance to fix structure, release equity for the next move, and rebalance debt. We treat it as strategy, not a 0.15% saving.',
      points: ['Equity release for next purchase', 'Cashflow + offset optimisation', 'Debt recycling setup', 'Lender re-rate &amp; review'],
    },
    business: {
      title: 'Commercial, SMSF and self-employed lending.',
      body: 'When the deal is non-vanilla — add-backs, trust structures, SMSF LRBA, commercial valuation — generalists struggle. We don\'t.',
      points: ['SMSF (LRBA) lending', 'Commercial &amp; investment', 'Self-employed servicing', 'Trust &amp; company applicants'],
    },
  };
  const c = content[activeTab];
  return (
    <section style={{background:'var(--surface)', borderTop:'1px solid var(--line-soft)'}} data-screen-label="03 Our approach">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Our approach</span>
            <h2 style={{marginTop:16}}>How we structure your lending.</h2>
          </div>
        </div>
        <div className="service-tabs">
          {tabs.map(t => (
            <div key={t.id} className={`service-tab ${activeTab===t.id?'active':''}`} onClick={() => setActiveTab(t.id)}>
              {t.label}
            </div>
          ))}
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:64, alignItems:'start'}}>
          <div>
            <h3 style={{fontSize:32, lineHeight:1.15, fontWeight:460, letterSpacing:'-0.02em'}}>{c.title}</h3>
            <p className="lead muted" style={{marginTop:20}}>{c.body}</p>
            <div style={{marginTop:32, display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
              {c.points.map((pt, i) => (
                <div key={i} style={{display:'flex', gap:10, alignItems:'start', padding:'12px 0'}}>
                  <span style={{width:22, height:22, borderRadius:'50%', background:'var(--brand-soft)', color:'var(--brand)', display:'inline-flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1}}>
                    <Icon name="check" size={12}/>
                  </span>
                  <span style={{fontSize:14.5}} dangerouslySetInnerHTML={{__html:pt}}/>
                </div>
              ))}
            </div>
          </div>
          <div style={{borderRadius:'var(--radius-lg)', overflow:'hidden', aspectRatio:'5/6'}}>
            <Placeholder label={`${c.title.split('.')[0]}`} tone={activeTab==='investors'?'sand':activeTab==='business'?'cream':'navy'}/>
          </div>
        </div>
      </div>
    </section>
  );
};

const Process = () => {
  const steps = [
    { n: '01', t: 'Strategy review', d: 'Free 30-min call. We map goals, capacity, current loans, structure.' },
    { n: '02', t: 'Plan & document', d: 'Written lending plan: structure, capacity, lender shortlist, sequence.' },
    { n: '03', t: 'Application & approval', d: 'We package the application properly — investor-grade, first time.' },
    { n: '04', t: 'Settlement & review', d: 'Annual reviews so the plan stays current with your goals and rates.' },
  ];
  return (
    <section className="process-section" data-screen-label="04 Process">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">From first call to settlement</span>
            <h2 style={{marginTop:16}}>A 4-step process. Same team end to end.</h2>
          </div>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div key={i} className="process-step">
              <div className="step-num">STEP / {s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Outcomes = () => (
  <section data-screen-label="05 Outcomes">
    <div className="container">
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center'}}>
        <div style={{borderRadius:'var(--radius-lg)', overflow:'hidden', aspectRatio:'4/3'}}>
          <Placeholder label="Client case — refinanced family" tone="sand"/>
        </div>
        <div>
          <span className="eyebrow">Recent outcome</span>
          <h2 style={{marginTop:16}}>Restructured, +$340k capacity, same income.</h2>
          <p className="lead muted" style={{marginTop:20, maxWidth:480}}>Client had three properties cross-collateralised across one lender. We restructured across three lenders, refinanced the PPR for debt recycling, and unlocked capacity for the next purchase.</p>
          <div style={{marginTop:32, display:'flex', gap:32, paddingTop:24, borderTop:'1px solid var(--line)'}}>
            <div>
              <div style={{fontSize:13, color:'var(--muted)'}}>Borrowing unlocked</div>
              <div style={{fontSize:28, fontWeight:500, color:'var(--brand)', marginTop:4}}>+$340k</div>
            </div>
            <div>
              <div style={{fontSize:13, color:'var(--muted)'}}>Annual interest saved</div>
              <div style={{fontSize:28, fontWeight:500, color:'var(--brand)', marginTop:4}}>$8,200</div>
            </div>
            <div>
              <div style={{fontSize:13, color:'var(--muted)'}}>Time to settlement</div>
              <div style={{fontSize:28, fontWeight:500, color:'var(--brand)', marginTop:4}}>21 days</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Lenders = () => {
  const lenders = ['CommBank', 'Westpac', 'NAB', 'ANZ', 'Macquarie', 'Bankwest', 'ING', 'St.George', 'Suncorp', 'AMP', 'BOQ', 'ME Bank', 'Bendigo', 'Pepper', 'Liberty', 'Resimac', '+ 24 more'];
  return (
    <section style={{background:'var(--bg-alt)'}} data-screen-label="06 Lender panel">
      <div className="container">
        <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 48px'}}>
          <span className="eyebrow" style={{justifyContent:'center'}}>35+ lenders</span>
          <h2 style={{marginTop:16}}>We shop hard, then we recommend with reason.</h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:8}}>
          {lenders.map((l, i) => (
            <div key={i} style={{background:'var(--surface)', border:'1px solid var(--line-soft)', borderRadius:12, padding:'20px 12px', textAlign:'center', fontSize:13.5, fontWeight:500, color:'var(--ink-2)'}}>{l}</div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ServiceCTA = ({ onBook }) => (
  <section className="final-cta" data-screen-label="07 Service CTA">
    <div className="container">
      <span className="eyebrow" style={{justifyContent:'center'}}>Ready to talk?</span>
      <h2 style={{marginTop:16}}>Book a lending strategy review.</h2>
      <p className="lead">A 30-minute call with a senior broker. Bring your current statements and walk away with a written direction.</p>
      <div className="ctas">
        <button className="btn btn-primary btn-lg" onClick={onBook}>
          Book a lending strategy review
          <span className="arrow"><Icon name="arrow-right" size={14}/></span>
        </button>
        <a href="calculator.html" className="btn btn-ghost btn-lg">
          Try the calculator first
        </a>
      </div>
    </div>
  </section>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ServiceApp />);