|
1 | 1 | "use client"; |
| 2 | +import { motion } from 'framer-motion' |
2 | 3 | import { useI18n } from '../../i18n/context' |
3 | 4 | import Section from '../Section' |
4 | 5 |
|
| 6 | +interface Example { |
| 7 | + op: string |
| 8 | + binary: string |
| 9 | + ternary: string |
| 10 | + savings: string |
| 11 | +} |
| 12 | + |
| 13 | +interface ComparisonItem { |
| 14 | + icon: string |
| 15 | + title: string |
| 16 | + desc: string |
| 17 | + examples?: Example[] |
| 18 | + features?: string[] |
| 19 | +} |
| 20 | + |
5 | 21 | export default function CalculatorLogicSection() { |
6 | 22 | const { t } = useI18n() |
7 | 23 | const cl = t.calculatorLogic |
8 | 24 |
|
9 | 25 | if (!cl) return null |
10 | 26 |
|
| 27 | + const binaryItem = cl.comparison?.[0] as ComparisonItem |
| 28 | + |
11 | 29 | return ( |
12 | 30 | <Section id="calculator-logic"> |
| 31 | + <div className="radial-glow" style={{ opacity: 0.15 }} /> |
13 | 32 | <div className="tight fade"> |
14 | 33 | <h2 dangerouslySetInnerHTML={{ __html: cl.title }} /> |
15 | 34 | <p>{cl.sub}</p> |
16 | 35 | </div> |
17 | 36 |
|
| 37 | + {/* Main comparison cards */} |
18 | 38 | <div className="fade" style={{ marginTop: '3rem', display: 'flex', gap: '2rem', flexWrap: 'wrap', justifyContent: 'center' }}> |
19 | | - {cl.comparison?.map((item: { icon: string; title: string; desc: string }, i: number) => ( |
20 | | - <div key={i} className="premium-card" style={{ flex: '1 1 300px', maxWidth: '450px', textAlign: 'center', borderColor: i === 1 ? 'var(--accent)' : 'var(--border)', padding: 'clamp(1.5rem, 5vw, 2.5rem)' }}> |
| 39 | + {cl.comparison?.map((item: ComparisonItem, i: number) => ( |
| 40 | + <motion.div |
| 41 | + key={i} |
| 42 | + className="premium-card" |
| 43 | + initial={{ opacity: 0, y: 20 }} |
| 44 | + whileInView={{ opacity: 1, y: 0 }} |
| 45 | + transition={{ delay: i * 0.1 }} |
| 46 | + viewport={{ once: true }} |
| 47 | + style={{ |
| 48 | + flex: '1 1 300px', |
| 49 | + maxWidth: '500px', |
| 50 | + textAlign: 'center', |
| 51 | + borderColor: i === 1 ? 'var(--accent)' : 'var(--border)', |
| 52 | + padding: 'clamp(1.5rem, 5vw, 2.5rem)' |
| 53 | + }} |
| 54 | + > |
21 | 55 | <div style={{ fontSize: 'clamp(2.5rem, 8vw, 3.5rem)', marginBottom: '1rem' }}>{item.icon}</div> |
22 | 56 | <h3 style={{ marginBottom: '1rem', color: i === 1 ? 'var(--accent)' : 'var(--text)', fontSize: 'clamp(1.2rem, 4vw, 1.5rem)' }}>{item.title}</h3> |
23 | | - <p style={{ color: 'var(--muted)', fontSize: 'clamp(0.85rem, 2.5vw, 0.95rem)', lineHeight: '1.6' }}>{item.desc}</p> |
24 | | - </div> |
| 57 | + <p style={{ color: 'var(--muted)', fontSize: 'clamp(0.85rem, 2.5vw, 0.95rem)', lineHeight: '1.6', marginBottom: '1.5rem' }}>{item.desc}</p> |
| 58 | + |
| 59 | + {/* Features list for ternary */} |
| 60 | + {item.features && ( |
| 61 | + <ul style={{ |
| 62 | + textAlign: 'left', |
| 63 | + listStyle: 'none', |
| 64 | + padding: 0, |
| 65 | + margin: 0, |
| 66 | + display: 'flex', |
| 67 | + flexDirection: 'column', |
| 68 | + gap: '0.5rem' |
| 69 | + }}> |
| 70 | + {item.features.map((feature: string, j: number) => ( |
| 71 | + <li key={j} style={{ |
| 72 | + fontSize: '0.85rem', |
| 73 | + color: 'var(--text)', |
| 74 | + display: 'flex', |
| 75 | + alignItems: 'flex-start', |
| 76 | + gap: '0.5rem' |
| 77 | + }}> |
| 78 | + <span style={{ color: 'var(--accent)', flexShrink: 0 }}>✓</span> |
| 79 | + {feature} |
| 80 | + </li> |
| 81 | + ))} |
| 82 | + </ul> |
| 83 | + )} |
| 84 | + </motion.div> |
25 | 85 | ))} |
26 | 86 | </div> |
27 | 87 |
|
| 88 | + {/* Detailed comparison table */} |
| 89 | + {binaryItem?.examples && ( |
| 90 | + <motion.div |
| 91 | + className="fade" |
| 92 | + initial={{ opacity: 0, y: 30 }} |
| 93 | + whileInView={{ opacity: 1, y: 0 }} |
| 94 | + viewport={{ once: true }} |
| 95 | + style={{ marginTop: '3rem', maxWidth: '900px', margin: '3rem auto 0' }} |
| 96 | + > |
| 97 | + <h3 style={{ textAlign: 'center', marginBottom: '1.5rem', color: 'var(--text)', fontSize: '1.1rem' }}> |
| 98 | + {cl.tableTitle} |
| 99 | + </h3> |
| 100 | + |
| 101 | + <div className="premium-card" style={{ padding: 0, overflow: 'hidden' }}> |
| 102 | + <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}> |
| 103 | + <thead> |
| 104 | + <tr style={{ background: 'rgba(0, 229, 153, 0.1)' }}> |
| 105 | + {cl.tableHeaders?.map((header: string, i: number) => ( |
| 106 | + <th key={i} style={{ |
| 107 | + padding: '1rem', |
| 108 | + textAlign: 'left', |
| 109 | + color: 'var(--accent)', |
| 110 | + fontWeight: 600, |
| 111 | + borderBottom: '1px solid var(--border)' |
| 112 | + }}> |
| 113 | + {header} |
| 114 | + </th> |
| 115 | + ))} |
| 116 | + </tr> |
| 117 | + </thead> |
| 118 | + <tbody> |
| 119 | + {binaryItem.examples.map((ex: Example, i: number) => ( |
| 120 | + <tr key={i} style={{ borderBottom: '1px solid var(--border)' }}> |
| 121 | + <td style={{ padding: '0.8rem 1rem', color: 'var(--text)', fontWeight: 500 }}> |
| 122 | + {ex.op} |
| 123 | + </td> |
| 124 | + <td style={{ padding: '0.8rem 1rem', color: 'var(--muted)' }}> |
| 125 | + {ex.binary} |
| 126 | + </td> |
| 127 | + <td style={{ padding: '0.8rem 1rem', color: 'var(--accent)' }}> |
| 128 | + {ex.ternary} |
| 129 | + </td> |
| 130 | + <td style={{ padding: '0.8rem 1rem' }}> |
| 131 | + <span style={{ |
| 132 | + background: 'rgba(34, 197, 94, 0.2)', |
| 133 | + color: '#22c55e', |
| 134 | + padding: '0.25rem 0.5rem', |
| 135 | + borderRadius: '4px', |
| 136 | + fontWeight: 600, |
| 137 | + fontSize: '0.8rem' |
| 138 | + }}> |
| 139 | + {ex.savings} |
| 140 | + </span> |
| 141 | + </td> |
| 142 | + </tr> |
| 143 | + ))} |
| 144 | + </tbody> |
| 145 | + </table> |
| 146 | + </div> |
| 147 | + </motion.div> |
| 148 | + )} |
| 149 | + |
| 150 | + {/* Quote */} |
28 | 151 | <div className="fade" style={{ marginTop: '3rem', maxWidth: '600px', margin: '3rem auto 0' }}> |
29 | 152 | <p style={{ fontSize: '1.1rem', fontStyle: 'italic', color: 'var(--text)', textAlign: 'center' }}>{cl.quote}</p> |
30 | 153 | </div> |
|
0 commit comments